@delmaredigital/payload-puck 0.6.13 → 0.6.14

package/dist/fields/BackgroundField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/BackgroundField.tsx"],"sourcesContent":["'use client'\n\n/**\n * BackgroundField - Custom Puck field for unified background selection\n *\n * This component provides a tabbed interface for selecting:\n * - None: No background\n * - Solid: Single color with opacity\n * - Gradient: Linear or radial gradients with multiple stops\n * - Image: Background image from media library with sizing options\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { X } from 'lucide-react'\nimport type {\n  BackgroundValue,\n  BackgroundImageValue,\n  ColorValue,\n  GradientValue,\n  GradientMask,\n  BackgroundOverlay,\n} from './shared.js'\nimport { backgroundValueToCSS, getBackgroundImageOpacity } from './shared.js'\nimport { ColorPickerField } from './ColorPickerField.js'\nimport { MediaField, type MediaReference } from './MediaField.js'\nimport { GradientEditor } from './GradientEditor.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype BackgroundType = 'none' | 'solid' | 'gradient' | 'image'\n\ninterface BackgroundFieldProps {\n  value: BackgroundValue | null\n  onChange: (value: BackgroundValue | null) => void\n  label?: string\n  readOnly?: boolean\n  apiEndpoint?: string\n  showOpacity?: boolean\n  colorPresets?: Array<{ hex: string; label: string }>\n}\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_VALUE: BackgroundValue = {\n  type: 'none',\n  solid: null,\n  gradient: null,\n  image: null,\n}\n\nconst DEFAULT_GRADIENT: GradientValue = {\n  type: 'linear',\n  angle: 90,\n  stops: [\n    { color: { hex: '#000000', opacity: 100 }, position: 0 },\n    { color: { hex: '#ffffff', opacity: 100 }, position: 100 },\n  ],\n  radialShape: 'circle',\n  radialPosition: 'center',\n}\n\nconst DEFAULT_IMAGE: BackgroundImageValue = {\n  media: null,\n  size: 'cover',\n  position: 'center',\n  repeat: 'no-repeat',\n  attachment: 'scroll',\n  opacity: 100,\n  mask: undefined,\n}\n\nconst DEFAULT_MASK: GradientMask = {\n  enabled: false,\n  direction: 'to-bottom',\n  startOpacity: 100,\n  endOpacity: 0,\n  startPosition: 0,\n  endPosition: 100,\n}\n\nconst DEFAULT_OVERLAY: BackgroundOverlay = {\n  enabled: false,\n  type: 'solid',\n  solid: { hex: '#000000', opacity: 50 },\n  gradient: null,\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  tabContainer: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n    padding: '4px',\n    backgroundColor: 'var(--theme-elevation-50)',\n    borderRadius: '8px',\n  } as CSSProperties,\n  tabButton: {\n    flex: '1 1 auto',\n    minWidth: 0,\n    padding: '6px 8px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: 'none',\n    borderRadius: '6px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n  } as CSSProperties,\n  tabButtonActive: {\n    flex: '1 1 auto',\n    minWidth: 0,\n    padding: '6px 8px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: 'none',\n    borderRadius: '6px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n  } as CSSProperties,\n  tabButtonDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n  previewContainer: {\n    position: 'relative',\n    height: '64px',\n    borderRadius: '6px',\n    border: '1px solid var(--theme-elevation-150)',\n    overflow: 'hidden',\n  } as CSSProperties,\n  previewEmpty: {\n    height: '100%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    backgroundColor: 'var(--theme-elevation-50)',\n  } as CSSProperties,\n  checkerboard: {\n    position: 'absolute',\n    inset: 0,\n    backgroundImage:\n      'linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)',\n    backgroundSize: '12px 12px',\n    backgroundPosition: '0 0, 0 6px, 6px -6px, -6px 0px',\n  } as CSSProperties,\n  contentContainer: {\n    minHeight: '100px',\n  } as CSSProperties,\n  emptyContent: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '96px',\n    fontSize: '14px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  imageOptionsContainer: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '16px',\n  } as CSSProperties,\n  optionsSection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n    paddingTop: '8px',\n    borderTop: '1px solid var(--theme-elevation-150)',\n  } as CSSProperties,\n  optionRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as CSSProperties,\n  optionLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    width: '80px',\n    flexShrink: 0,\n  } as CSSProperties,\n  optionLabelSmall: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    width: '48px',\n    flexShrink: 0,\n  } as CSSProperties,\n  select: {\n    flex: 1,\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '12px',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  selectSmall: {\n    flex: 1,\n    minWidth: 0,\n    height: '28px',\n    padding: '0 8px',\n    fontSize: '12px',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  slider: {\n    flex: 1,\n    minWidth: 0,\n    height: '6px',\n    accentColor: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  sliderValue: {\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    color: 'var(--theme-elevation-500)',\n    width: '32px',\n    textAlign: 'right',\n    flexShrink: 0,\n  } as CSSProperties,\n  checkboxRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n    cursor: 'pointer',\n  } as CSSProperties,\n  checkbox: {\n    width: '16px',\n    height: '16px',\n    accentColor: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  checkboxLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  maskSection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n    paddingLeft: '24px',\n  } as CSSProperties,\n  overlaySection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n    paddingTop: '12px',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// Tab Button Component\n// =============================================================================\n\ninterface TabButtonProps {\n  active: boolean\n  onClick: () => void\n  disabled?: boolean\n  children: React.ReactNode\n}\n\nfunction TabButton({ active, onClick, disabled, children }: TabButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      style={{\n        ...(active ? styles.tabButtonActive : styles.tabButton),\n        ...(disabled ? styles.tabButtonDisabled : {}),\n      }}\n    >\n      {children}\n    </button>\n  )\n}\n\n// =============================================================================\n// Background Preview Component\n// =============================================================================\n\ninterface BackgroundPreviewProps {\n  value: BackgroundValue\n}\n\nfunction BackgroundPreview({ value }: BackgroundPreviewProps) {\n  const style = backgroundValueToCSS(value)\n  const imageOpacity = getBackgroundImageOpacity(value)\n  const hasBackground = value.type !== 'none' && Object.keys(style).length > 0\n\n  return (\n    <div style={styles.previewContainer as CSSProperties}>\n      {/* Checkerboard background for transparency preview */}\n      {hasBackground && <div style={styles.checkerboard as CSSProperties} />}\n\n      {/* Background layer */}\n      {hasBackground && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            ...style,\n            opacity: imageOpacity !== undefined ? imageOpacity : 1,\n          } as CSSProperties}\n        />\n      )}\n\n      {!hasBackground && (\n        <div style={styles.previewEmpty}>No background</div>\n      )}\n    </div>\n  )\n}\n\n// =============================================================================\n// Image Options Component\n// =============================================================================\n\ninterface ImageOptionsProps {\n  value: BackgroundImageValue\n  onChange: (value: BackgroundImageValue) => void\n  readOnly?: boolean\n  apiEndpoint?: string\n}\n\nfunction ImageOptionsInner({ value, onChange, readOnly, apiEndpoint }: ImageOptionsProps) {\n  const handleMediaChange = useCallback(\n    (media: MediaReference | null) => {\n      onChange({ ...value, media })\n    },\n    [value, onChange]\n  )\n\n  const handleSizeChange = useCallback(\n    (size: BackgroundImageValue['size']) => {\n      onChange({ ...value, size })\n    },\n    [value, onChange]\n  )\n\n  const handlePositionChange = useCallback(\n    (position: BackgroundImageValue['position']) => {\n      onChange({ ...value, position })\n    },\n    [value, onChange]\n  )\n\n  const handleRepeatChange = useCallback(\n    (repeat: BackgroundImageValue['repeat']) => {\n      onChange({ ...value, repeat })\n    },\n    [value, onChange]\n  )\n\n  const handleAttachmentChange = useCallback(\n    (attachment: BackgroundImageValue['attachment']) => {\n      onChange({ ...value, attachment })\n    },\n    [value, onChange]\n  )\n\n  const handleOpacityChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const opacity = parseInt(e.target.value, 10)\n      onChange({ ...value, opacity })\n    },\n    [value, onChange]\n  )\n\n  const handleMaskToggle = useCallback(\n    (checked: boolean) => {\n      if (checked) {\n        onChange({ ...value, mask: { ...DEFAULT_MASK, enabled: true } })\n      } else {\n        onChange({ ...value, mask: undefined })\n      }\n    },\n    [value, onChange]\n  )\n\n  const handleMaskDirectionChange = useCallback(\n    (direction: GradientMask['direction']) => {\n      const currentMask = value.mask || DEFAULT_MASK\n      onChange({ ...value, mask: { ...currentMask, direction, enabled: true } })\n    },\n    [value, onChange]\n  )\n\n  const handleMaskStartPositionChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const startPosition = parseInt(e.target.value, 10)\n      const currentMask = value.mask || DEFAULT_MASK\n      onChange({ ...value, mask: { ...currentMask, startPosition, enabled: true } })\n    },\n    [value, onChange]\n  )\n\n  const handleMaskEndPositionChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const endPosition = parseInt(e.target.value, 10)\n      const currentMask = value.mask || DEFAULT_MASK\n      onChange({ ...value, mask: { ...currentMask, endPosition, enabled: true } })\n    },\n    [value, onChange]\n  )\n\n  const opacity = value.opacity ?? 100\n  const maskEnabled = value.mask?.enabled ?? false\n\n  return (\n    <div style={styles.imageOptionsContainer as CSSProperties}>\n      {/* Media Picker */}\n      <MediaField\n        value={value.media}\n        onChange={handleMediaChange}\n        readOnly={readOnly}\n        apiEndpoint={apiEndpoint}\n      />\n\n      {/* Image Options - only show when image is selected */}\n      {value.media && (\n        <div style={styles.optionsSection as CSSProperties}>\n          {/* Opacity */}\n          <div style={styles.optionRow}>\n            <label style={styles.optionLabel}>Opacity</label>\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={opacity}\n              onChange={handleOpacityChange}\n              disabled={readOnly}\n              style={styles.slider}\n            />\n            <span style={styles.sliderValue as CSSProperties}>{opacity}%</span>\n          </div>\n\n          {/* Size */}\n          <div style={styles.optionRow}>\n            <label style={styles.optionLabel}>Size</label>\n            <select\n              value={value.size}\n              onChange={(e) => handleSizeChange(e.target.value as BackgroundImageValue['size'])}\n              disabled={readOnly}\n              style={styles.select}\n            >\n              <option value=\"cover\">Cover</option>\n              <option value=\"contain\">Contain</option>\n              <option value=\"auto\">Auto</option>\n            </select>\n          </div>\n\n          {/* Position */}\n          <div style={styles.optionRow}>\n            <label style={styles.optionLabel}>Position</label>\n            <select\n              value={value.position}\n              onChange={(e) => handlePositionChange(e.target.value as BackgroundImageValue['position'])}\n              disabled={readOnly}\n              style={styles.select}\n            >\n              <option value=\"center\">Center</option>\n              <option value=\"top\">Top</option>\n              <option value=\"bottom\">Bottom</option>\n              <option value=\"left\">Left</option>\n              <option value=\"right\">Right</option>\n              <option value=\"top-left\">Top Left</option>\n              <option value=\"top-right\">Top Right</option>\n              <option value=\"bottom-left\">Bottom Left</option>\n              <option value=\"bottom-right\">Bottom Right</option>\n            </select>\n          </div>\n\n          {/* Repeat */}\n          <div style={styles.optionRow}>\n            <label style={styles.optionLabel}>Repeat</label>\n            <select\n              value={value.repeat}\n              onChange={(e) => handleRepeatChange(e.target.value as BackgroundImageValue['repeat'])}\n              disabled={readOnly}\n              style={styles.select}\n            >\n              <option value=\"no-repeat\">No Repeat</option>\n              <option value=\"repeat\">Repeat</option>\n              <option value=\"repeat-x\">Repeat X</option>\n              <option value=\"repeat-y\">Repeat Y</option>\n            </select>\n          </div>\n\n          {/* Attachment */}\n          <div style={styles.optionRow}>\n            <label style={styles.optionLabel}>Attachment</label>\n            <select\n              value={value.attachment}\n              onChange={(e) => handleAttachmentChange(e.target.value as BackgroundImageValue['attachment'])}\n              disabled={readOnly}\n              style={styles.select}\n            >\n              <option value=\"scroll\">Scroll</option>\n              <option value=\"fixed\">Fixed</option>\n            </select>\n          </div>\n\n          {/* Fade to Transparent (Gradient Mask) */}\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', paddingTop: '12px' } as CSSProperties}>\n            <label style={styles.checkboxRow}>\n              <input\n                type=\"checkbox\"\n                checked={maskEnabled}\n                onChange={(e) => handleMaskToggle(e.target.checked)}\n                disabled={readOnly}\n                style={styles.checkbox}\n              />\n              <span style={styles.checkboxLabel}>Fade to transparent</span>\n            </label>\n\n            {maskEnabled && (\n              <div style={styles.maskSection as CSSProperties}>\n                {/* Direction */}\n                <div style={styles.optionRow}>\n                  <label style={styles.optionLabelSmall}>Dir</label>\n                  <select\n                    value={value.mask?.direction || 'to-bottom'}\n                    onChange={(e) => handleMaskDirectionChange(e.target.value as GradientMask['direction'])}\n                    disabled={readOnly}\n                    style={styles.selectSmall}\n                  >\n                    <option value=\"to-top\">To Top</option>\n                    <option value=\"to-bottom\">To Bottom</option>\n                    <option value=\"to-left\">To Left</option>\n                    <option value=\"to-right\">To Right</option>\n                    <option value=\"to-top-left\">To Top Left</option>\n                    <option value=\"to-top-right\">To Top Right</option>\n                    <option value=\"to-bottom-left\">To Bottom Left</option>\n                    <option value=\"to-bottom-right\">To Bottom Right</option>\n                    <option value=\"from-center\">From Center (Radial)</option>\n                  </select>\n                </div>\n\n                {/* Start Position */}\n                <div style={styles.optionRow}>\n                  <label style={styles.optionLabelSmall}>Start</label>\n                  <input\n                    type=\"range\"\n                    min=\"0\"\n                    max=\"100\"\n                    value={value.mask?.startPosition ?? 0}\n                    onChange={handleMaskStartPositionChange}\n                    disabled={readOnly}\n                    style={styles.slider}\n                  />\n                  <span style={styles.sliderValue as CSSProperties}>\n                    {value.mask?.startPosition ?? 0}%\n                  </span>\n                </div>\n\n                {/* End Position */}\n                <div style={styles.optionRow}>\n                  <label style={styles.optionLabelSmall}>End</label>\n                  <input\n                    type=\"range\"\n                    min=\"0\"\n                    max=\"100\"\n                    value={value.mask?.endPosition ?? 100}\n                    onChange={handleMaskEndPositionChange}\n                    disabled={readOnly}\n                    style={styles.slider}\n                  />\n                  <span style={styles.sliderValue as CSSProperties}>\n                    {value.mask?.endPosition ?? 100}%\n                  </span>\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nconst ImageOptions = memo(ImageOptionsInner)\n\n// =============================================================================\n// BackgroundField Component\n// =============================================================================\n\nfunction BackgroundFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n  apiEndpoint = '/api/media',\n  showOpacity = true,\n  colorPresets,\n}: BackgroundFieldProps) {\n  const currentValue = value || DEFAULT_VALUE\n  const currentType = currentValue.type\n\n  // Handle type change\n  const handleTypeChange = useCallback(\n    (type: BackgroundType) => {\n      const newValue: BackgroundValue = {\n        ...currentValue,\n        type,\n      }\n\n      // Initialize defaults for the new type if needed\n      if (type === 'gradient' && !newValue.gradient) {\n        newValue.gradient = DEFAULT_GRADIENT\n      }\n      if (type === 'image' && !newValue.image) {\n        newValue.image = DEFAULT_IMAGE\n      }\n\n      onChange(newValue)\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle solid color change\n  const handleSolidChange = useCallback(\n    (solid: ColorValue | null) => {\n      onChange({ ...currentValue, solid })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle gradient change\n  const handleGradientChange = useCallback(\n    (gradient: GradientValue) => {\n      onChange({ ...currentValue, gradient })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle image change\n  const handleImageChange = useCallback(\n    (image: BackgroundImageValue) => {\n      onChange({ ...currentValue, image })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle overlay toggle\n  const handleOverlayToggle = useCallback(\n    (checked: boolean) => {\n      if (checked) {\n        onChange({ ...currentValue, overlay: { ...DEFAULT_OVERLAY, enabled: true } })\n      } else {\n        onChange({ ...currentValue, overlay: { ...DEFAULT_OVERLAY, enabled: false } })\n      }\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle overlay type change\n  const handleOverlayTypeChange = useCallback(\n    (type: 'solid' | 'gradient') => {\n      const currentOverlay = currentValue.overlay || DEFAULT_OVERLAY\n      onChange({\n        ...currentValue,\n        overlay: {\n          ...currentOverlay,\n          type,\n          enabled: true,\n          // Initialize gradient if switching to gradient and not set\n          gradient:\n            type === 'gradient' && !currentOverlay.gradient ? DEFAULT_GRADIENT : currentOverlay.gradient,\n        },\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle overlay solid color change\n  const handleOverlaySolidChange = useCallback(\n    (solid: ColorValue | null) => {\n      const currentOverlay = currentValue.overlay || DEFAULT_OVERLAY\n      onChange({\n        ...currentValue,\n        overlay: { ...currentOverlay, solid, enabled: true },\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle overlay gradient change\n  const handleOverlayGradientChange = useCallback(\n    (gradient: GradientValue) => {\n      const currentOverlay = currentValue.overlay || DEFAULT_OVERLAY\n      onChange({\n        ...currentValue,\n        overlay: { ...currentOverlay, gradient, enabled: true },\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle clear\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const overlayEnabled = currentValue.overlay?.enabled ?? false\n  const overlayType = currentValue.overlay?.type ?? 'solid'\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        {label && <label style={styles.label}>{label}</label>}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            title=\"Clear background\"\n            style={styles.clearButton}\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Preview */}\n      <BackgroundPreview value={currentValue} />\n\n      {/* Type Tabs */}\n      <div style={styles.tabContainer}>\n        <TabButton\n          active={currentType === 'none'}\n          onClick={() => handleTypeChange('none')}\n          disabled={readOnly}\n        >\n          None\n        </TabButton>\n        <TabButton\n          active={currentType === 'solid'}\n          onClick={() => handleTypeChange('solid')}\n          disabled={readOnly}\n        >\n          Solid\n        </TabButton>\n        <TabButton\n          active={currentType === 'gradient'}\n          onClick={() => handleTypeChange('gradient')}\n          disabled={readOnly}\n        >\n          Gradient\n        </TabButton>\n        <TabButton\n          active={currentType === 'image'}\n          onClick={() => handleTypeChange('image')}\n          disabled={readOnly}\n        >\n          Image\n        </TabButton>\n      </div>\n\n      {/* Tab Content */}\n      <div style={styles.contentContainer}>\n        {currentType === 'none' && (\n          <div style={styles.emptyContent}>No background selected</div>\n        )}\n\n        {currentType === 'solid' && (\n          <ColorPickerField\n            value={currentValue.solid || null}\n            onChange={handleSolidChange}\n            readOnly={readOnly}\n            showOpacity={showOpacity}\n            presets={colorPresets}\n          />\n        )}\n\n        {currentType === 'gradient' && (\n          <GradientEditor\n            value={currentValue.gradient || null}\n            onChange={handleGradientChange}\n            readOnly={readOnly}\n          />\n        )}\n\n        {currentType === 'image' && (\n          <div style={styles.imageOptionsContainer as CSSProperties}>\n            <ImageOptions\n              value={currentValue.image || DEFAULT_IMAGE}\n              onChange={handleImageChange}\n              readOnly={readOnly}\n              apiEndpoint={apiEndpoint}\n            />\n\n            {/* Overlay Section - only show when image is selected */}\n            {currentValue.image?.media && (\n              <div style={styles.overlaySection as CSSProperties}>\n                <label style={styles.checkboxRow}>\n                  <input\n                    type=\"checkbox\"\n                    checked={overlayEnabled}\n                    onChange={(e) => handleOverlayToggle(e.target.checked)}\n                    disabled={readOnly}\n                    style={styles.checkbox}\n                  />\n                  <span style={styles.checkboxLabel}>Enable overlay</span>\n                </label>\n\n                {overlayEnabled && (\n                  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' } as CSSProperties}>\n                    {/* Overlay Type Toggle */}\n                    <div style={styles.tabContainer}>\n                      <TabButton\n                        active={overlayType === 'solid'}\n                        onClick={() => handleOverlayTypeChange('solid')}\n                        disabled={readOnly}\n                      >\n                        Solid Color\n                      </TabButton>\n                      <TabButton\n                        active={overlayType === 'gradient'}\n                        onClick={() => handleOverlayTypeChange('gradient')}\n                        disabled={readOnly}\n                      >\n                        Gradient\n                      </TabButton>\n                    </div>\n\n                    {/* Overlay Editor */}\n                    {overlayType === 'solid' ? (\n                      <ColorPickerField\n                        value={currentValue.overlay?.solid || null}\n                        onChange={handleOverlaySolidChange}\n                        readOnly={readOnly}\n                        showOpacity={true}\n                      />\n                    ) : (\n                      <GradientEditor\n                        value={currentValue.overlay?.gradient || null}\n                        onChange={handleOverlayGradientChange}\n                        readOnly={readOnly}\n                      />\n                    )}\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport const BackgroundField = memo(BackgroundFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\n/**\n * Creates a Puck field configuration for background selection\n */\nexport function createBackgroundField(config: {\n  label?: string\n  apiEndpoint?: string\n  showOpacity?: boolean\n  colorPresets?: Array<{ hex: string; label: string }>\n} = {}): CustomField<BackgroundValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <BackgroundField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        apiEndpoint={config.apiEndpoint}\n        showOpacity={config.showOpacity}\n        colorPresets={config.colorPresets}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","X","backgroundValueToCSS","getBackgroundImageOpacity","ColorPickerField","MediaField","GradientEditor","DEFAULT_VALUE","type","solid","gradient","image","DEFAULT_GRADIENT","angle","stops","color","hex","opacity","position","radialShape","radialPosition","DEFAULT_IMAGE","media","size","repeat","attachment","mask","undefined","DEFAULT_MASK","enabled","direction","startOpacity","endOpacity","startPosition","endPosition","DEFAULT_OVERLAY","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","label","fontSize","fontWeight","clearButton","width","height","padding","border","borderRadius","backgroundColor","cursor","tabContainer","flexWrap","tabButton","flex","minWidth","whiteSpace","tabButtonActive","tabButtonDisabled","previewContainer","overflow","previewEmpty","checkerboard","inset","backgroundImage","backgroundSize","backgroundPosition","contentContainer","minHeight","emptyContent","imageOptionsContainer","optionsSection","paddingTop","borderTop","optionRow","optionLabel","flexShrink","optionLabelSmall","select","selectSmall","slider","accentColor","sliderValue","fontFamily","textAlign","checkboxRow","checkbox","checkboxLabel","maskSection","paddingLeft","overlaySection","TabButton","active","onClick","disabled","children","button","style","BackgroundPreview","value","imageOpacity","hasBackground","Object","keys","length","div","ImageOptionsInner","onChange","readOnly","apiEndpoint","handleMediaChange","handleSizeChange","handlePositionChange","handleRepeatChange","handleAttachmentChange","handleOpacityChange","e","parseInt","target","handleMaskToggle","checked","handleMaskDirectionChange","currentMask","handleMaskStartPositionChange","handleMaskEndPositionChange","maskEnabled","input","min","max","span","option","ImageOptions","BackgroundFieldInner","showOpacity","colorPresets","currentValue","currentType","handleTypeChange","newValue","handleSolidChange","handleGradientChange","handleImageChange","handleOverlayToggle","overlay","handleOverlayTypeChange","currentOverlay","handleOverlaySolidChange","handleOverlayGradientChange","handleClear","overlayEnabled","overlayType","className","title","presets","BackgroundField","createBackgroundField","config","render"],"mappings":"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"}

package/dist/fields/BorderField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BorderField.d.ts","sourceRoot":"","sources":["../../src/fields/BorderField.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AASnD,OAAO,KAAK,EAAE,WAAW,EAAc,MAAM,aAAa,CAAA;AAQ1D,UAAU,gBAAgB;IACxB,KAAK,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAkKD,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,GACT,EAAE,gBAAgB,qBAqMlB;AAED,eAAO,MAAM,WAAW,oDAAyB,CAAA;AAMjD;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,CAalC"}

package/dist/fields/BorderField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/BorderField.tsx"],"sourcesContent":["'use client'\n\n/**\n * BorderField - Custom Puck field for border styling\n *\n * This component provides:\n * - Border width input (px)\n * - Border color picker (reuses ColorPickerField)\n * - Border radius input\n * - Border style selector (solid, dashed, dotted, none)\n * - Per-side toggles (top, right, bottom, left)\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport {\n  X,\n  ArrowUp,\n  ArrowRight,\n  ArrowDown,\n  ArrowLeft,\n} from 'lucide-react'\nimport { ColorPickerField } from './ColorPickerField.js'\nimport type { BorderValue, ColorValue } from './shared.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ntype BorderStyle = 'none' | 'solid' | 'dashed' | 'dotted'\n\ninterface BorderFieldProps {\n  value: BorderValue | null\n  onChange: (value: BorderValue | null) => void\n  label?: string\n  readOnly?: boolean\n}\n\n// =============================================================================\n// Default Value\n// =============================================================================\n\nconst DEFAULT_VALUE: BorderValue = {\n  width: 1,\n  color: { hex: '#e5e7eb', opacity: 100 }, // gray-200\n  radius: 0,\n  style: 'solid',\n  sides: {\n    top: true,\n    right: true,\n    bottom: true,\n    left: true,\n  },\n}\n\n// =============================================================================\n// Border Style Options\n// =============================================================================\n\nconst BORDER_STYLES: Array<{ value: BorderStyle; label: string }> = [\n  { value: 'solid', label: 'Solid' },\n  { value: 'dashed', label: 'Dashed' },\n  { value: 'dotted', label: 'Dotted' },\n  { value: 'none', label: 'None' },\n]\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '16px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  preview: {\n    height: '64px',\n    backgroundColor: 'var(--theme-elevation-50)',\n    borderRadius: '6px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  } as CSSProperties,\n  previewText: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  grid: {\n    display: 'grid',\n    gridTemplateColumns: '1fr 1fr',\n    gap: '12px',\n  } as CSSProperties,\n  inputGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '4px',\n  } as CSSProperties,\n  inputLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  input: {\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  select: {\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '14px',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  sidesSection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  sidesLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  sidesButtons: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  sideButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  sideButtonActive: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  sidesInfo: {\n    fontSize: '10px',\n    color: 'var(--theme-elevation-500)',\n    textAlign: 'center',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// BorderField Component\n// =============================================================================\n\nfunction BorderFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n}: BorderFieldProps) {\n  // Use default if no value\n  const currentValue = value || DEFAULT_VALUE\n\n  // Handle width change\n  const handleWidthChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newWidth = parseInt(e.target.value, 10) || 0\n    onChange({\n      ...currentValue,\n      width: Math.max(0, newWidth),\n    })\n  }, [currentValue, onChange])\n\n  // Handle color change\n  const handleColorChange = useCallback((newColor: ColorValue | null) => {\n    onChange({\n      ...currentValue,\n      color: newColor || { hex: '#000000', opacity: 100 },\n    })\n  }, [currentValue, onChange])\n\n  // Handle radius change\n  const handleRadiusChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newRadius = parseInt(e.target.value, 10) || 0\n    onChange({\n      ...currentValue,\n      radius: Math.max(0, newRadius),\n    })\n  }, [currentValue, onChange])\n\n  // Handle style change\n  const handleStyleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {\n    onChange({\n      ...currentValue,\n      style: e.target.value as BorderStyle,\n    })\n  }, [currentValue, onChange])\n\n  // Handle side toggle\n  const handleSideToggle = useCallback((side: 'top' | 'right' | 'bottom' | 'left') => {\n    onChange({\n      ...currentValue,\n      sides: {\n        ...currentValue.sides,\n        [side]: !currentValue.sides[side],\n      },\n    })\n  }, [currentValue, onChange])\n\n  // Handle clear\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  // Check if all sides are enabled\n  const allSidesEnabled = currentValue.sides.top &&\n    currentValue.sides.right &&\n    currentValue.sides.bottom &&\n    currentValue.sides.left\n\n  const sideConfig = [\n    { side: 'top' as const, icon: ArrowUp, title: 'Top border' },\n    { side: 'right' as const, icon: ArrowRight, title: 'Right border' },\n    { side: 'bottom' as const, icon: ArrowDown, title: 'Bottom border' },\n    { side: 'left' as const, icon: ArrowLeft, title: 'Left border' },\n  ]\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        {label && (\n          <label style={styles.label}>{label}</label>\n        )}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Clear border\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Border preview */}\n      <div\n        style={{\n          ...styles.preview,\n          borderWidth: currentValue.style !== 'none' ? `${currentValue.width}px` : 0,\n          borderStyle: currentValue.style,\n          borderColor: currentValue.color?.hex || '#000000',\n          borderRadius: `${currentValue.radius}px`,\n          borderTopWidth: currentValue.sides.top && currentValue.style !== 'none' ? `${currentValue.width}px` : 0,\n          borderRightWidth: currentValue.sides.right && currentValue.style !== 'none' ? `${currentValue.width}px` : 0,\n          borderBottomWidth: currentValue.sides.bottom && currentValue.style !== 'none' ? `${currentValue.width}px` : 0,\n          borderLeftWidth: currentValue.sides.left && currentValue.style !== 'none' ? `${currentValue.width}px` : 0,\n          opacity: (currentValue.color?.opacity ?? 100) / 100,\n        }}\n      >\n        <span style={styles.previewText}>Preview</span>\n      </div>\n\n      {/* Width and Style row */}\n      <div style={styles.grid}>\n        {/* Width */}\n        <div style={styles.inputGroup as CSSProperties}>\n          <label style={styles.inputLabel}>Width (px)</label>\n          <input\n            type=\"number\"\n            min={0}\n            max={20}\n            value={currentValue.width}\n            onChange={handleWidthChange}\n            disabled={readOnly}\n            style={styles.input}\n          />\n        </div>\n\n        {/* Style */}\n        <div style={styles.inputGroup as CSSProperties}>\n          <label style={styles.inputLabel}>Style</label>\n          <select\n            value={currentValue.style}\n            onChange={handleStyleChange}\n            disabled={readOnly}\n            style={styles.select}\n          >\n            {BORDER_STYLES.map((style) => (\n              <option key={style.value} value={style.value}>\n                {style.label}\n              </option>\n            ))}\n          </select>\n        </div>\n      </div>\n\n      {/* Radius */}\n      <div style={styles.inputGroup as CSSProperties}>\n        <label style={styles.inputLabel}>Radius (px)</label>\n        <input\n          type=\"number\"\n          min={0}\n          max={100}\n          value={currentValue.radius}\n          onChange={handleRadiusChange}\n          disabled={readOnly}\n          style={styles.input}\n        />\n      </div>\n\n      {/* Color */}\n      <ColorPickerField\n        value={currentValue.color}\n        onChange={handleColorChange}\n        label=\"Color\"\n        readOnly={readOnly}\n        showOpacity={true}\n        presets={[\n          { hex: '#000000', label: 'Black' },\n          { hex: '#374151', label: 'Gray 700' },\n          { hex: '#6b7280', label: 'Gray 500' },\n          { hex: '#d1d5db', label: 'Gray 300' },\n          { hex: '#e5e7eb', label: 'Gray 200' },\n          { hex: '#3b82f6', label: 'Blue' },\n          { hex: '#ef4444', label: 'Red' },\n        ]}\n      />\n\n      {/* Per-side toggles */}\n      {!readOnly && (\n        <div style={styles.sidesSection as CSSProperties}>\n          <label style={styles.sidesLabel}>Sides</label>\n          <div style={styles.sidesButtons}>\n            {sideConfig.map(({ side, icon: Icon, title }) => {\n              const isActive = currentValue.sides[side]\n              return (\n                <button\n                  key={side}\n                  type=\"button\"\n                  onClick={() => handleSideToggle(side)}\n                  style={isActive ? styles.sideButtonActive : styles.sideButton}\n                  title={title}\n                >\n                  <Icon style={{ width: '16px', height: '16px' }} />\n                </button>\n              )\n            })}\n          </div>\n          <p style={styles.sidesInfo as CSSProperties}>\n            {allSidesEnabled ? 'All sides' : 'Custom sides'}\n          </p>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const BorderField = memo(BorderFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\n/**\n * Creates a Puck field configuration for border styling\n */\nexport function createBorderField(config: {\n  label?: string\n}): CustomField<BorderValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <BorderField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","X","ArrowUp","ArrowRight","ArrowDown","ArrowLeft","ColorPickerField","DEFAULT_VALUE","width","color","hex","opacity","radius","style","sides","top","right","bottom","left","BORDER_STYLES","value","label","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","fontSize","fontWeight","clearButton","height","padding","border","borderRadius","backgroundColor","cursor","preview","previewText","grid","gridTemplateColumns","inputGroup","inputLabel","input","fontFamily","select","sidesSection","sidesLabel","sidesButtons","flexWrap","sideButton","sideButtonActive","sidesInfo","textAlign","BorderFieldInner","onChange","readOnly","currentValue","handleWidthChange","e","newWidth","parseInt","target","Math","max","handleColorChange","newColor","handleRadiusChange","newRadius","handleStyleChange","handleSideToggle","side","handleClear","allSidesEnabled","sideConfig","icon","title","div","className","button","type","onClick","borderWidth","borderStyle","borderColor","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","span","min","disabled","map","option","showOpacity","presets","Icon","isActive","p","BorderField","createBorderField","config","render"],"mappings":"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"}

package/dist/fields/ColorPickerField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/ColorPickerField.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAO7C,UAAU,qBAAqB;IAC7B,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAChD;AAuBD;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAMhE;AAqKD,iBAAS,qBAAqB,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAkB,EAClB,OAAO,GACR,EAAE,qBAAqB,qBAuLvB;AAED,eAAO,MAAM,gBAAgB,yDAA8B,CAAA;AAM3D;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAChD,GAAG,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,CAejC"}

package/dist/fields/ColorPickerField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/ColorPickerField.tsx"],"sourcesContent":["'use client'\n\n/**\n * ColorPickerField - Custom Puck field for selecting colors with opacity\n *\n * This component provides a color picker with:\n * - Native color input for visual picking\n * - Hex input for direct entry\n * - Opacity slider (0-100%)\n * - Preview swatch\n * - Optional preset color swatches\n */\n\nimport React, { useState, useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { X } from 'lucide-react'\nimport type { ColorValue } from './shared.js'\nimport { useTheme } from '../theme/index.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface ColorPickerFieldProps {\n  value: ColorValue | null\n  onChange: (value: ColorValue | null) => void\n  label?: string\n  readOnly?: boolean\n  showOpacity?: boolean\n  presets?: Array<{ hex: string; label: string }>\n}\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Validates and normalizes a hex color string\n */\nfunction normalizeHex(hex: string): string {\n  let clean = hex.replace(/^#/, '')\n\n  if (clean.length === 3) {\n    clean = clean.split('').map(c => c + c).join('')\n  }\n\n  if (!/^[0-9A-Fa-f]{6}$/.test(clean)) {\n    return ''\n  }\n\n  return `#${clean.toLowerCase()}`\n}\n\n/**\n * Converts hex + opacity to rgba CSS string\n */\nexport function colorToRgba(hex: string, opacity: number): string {\n  const clean = hex.replace(/^#/, '')\n  const r = parseInt(clean.substring(0, 2), 16)\n  const g = parseInt(clean.substring(2, 4), 16)\n  const b = parseInt(clean.substring(4, 6), 16)\n  return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as CSSProperties,\n  label: {\n    display: 'block',\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  row: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  colorInput: {\n    width: '40px',\n    height: '40px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '6px',\n    cursor: 'pointer',\n  } as CSSProperties,\n  hexInput: {\n    flex: '1 1 80px',\n    minWidth: 0,\n    height: '40px',\n    padding: '0 12px',\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '6px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  previewSwatch: {\n    width: '40px',\n    height: '40px',\n    borderRadius: '6px',\n    border: '1px solid var(--theme-elevation-150)',\n    flexShrink: 0,\n    position: 'relative',\n    overflow: 'hidden',\n  } as CSSProperties,\n  checkerboard: {\n    position: 'absolute',\n    inset: 0,\n    backgroundImage:\n      'linear-gradient(45deg, #d0d0d0 25%, transparent 25%), linear-gradient(-45deg, #d0d0d0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d0d0d0 75%), linear-gradient(-45deg, transparent 75%, #d0d0d0 75%)',\n    backgroundSize: '8px 8px',\n    backgroundPosition: '0 0, 0 4px, 4px -4px, -4px 0px',\n    backgroundColor: '#f0f0f0',\n  } as CSSProperties,\n  colorOverlay: {\n    position: 'absolute',\n    inset: 0,\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n    flexShrink: 0,\n  } as CSSProperties,\n  opacitySection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '4px',\n  } as CSSProperties,\n  opacityHeader: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  opacityLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  opacityValue: {\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  opacitySlider: {\n    position: 'relative',\n    height: '12px',\n    borderRadius: '6px',\n    overflow: 'hidden',\n    border: '1px solid var(--theme-elevation-150)',\n  } as CSSProperties,\n  opacityInput: {\n    position: 'absolute',\n    inset: 0,\n    width: '100%',\n    height: '100%',\n    opacity: 0,\n    cursor: 'pointer',\n    margin: 0,\n  } as CSSProperties,\n  opacityThumb: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    width: '4px',\n    backgroundColor: 'white',\n    border: '1px solid var(--theme-elevation-400)',\n    borderRadius: '2px',\n    boxShadow: '0 1px 2px rgba(0,0,0,0.1)',\n    pointerEvents: 'none',\n  } as CSSProperties,\n  presetsSection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  presetsLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  presetsGrid: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '6px',\n  } as CSSProperties,\n  presetButton: {\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    borderRadius: '4px',\n    cursor: 'pointer',\n    border: '1px solid var(--theme-elevation-150)',\n    outline: 'none',\n  } as CSSProperties,\n  presetButtonSelected: {\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    borderRadius: '4px',\n    cursor: 'pointer',\n    border: '2px solid var(--theme-elevation-800)',\n    outline: '2px solid var(--theme-elevation-300)',\n    outlineOffset: '2px',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// ColorPickerField Component\n// =============================================================================\n\nfunction ColorPickerFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n  showOpacity = true,\n  presets,\n}: ColorPickerFieldProps) {\n  // Use theme presets if none provided\n  const theme = useTheme()\n  const resolvedPresets = presets ?? theme.colorPresets\n  const [hexInput, setHexInput] = useState(value?.hex || '')\n\n  const handleColorChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newHex = e.target.value\n    onChange({\n      hex: newHex,\n      opacity: value?.opacity ?? 100,\n    })\n    setHexInput(newHex)\n  }, [onChange, value?.opacity])\n\n  const handleHexInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const input = e.target.value\n    setHexInput(input)\n\n    const normalized = normalizeHex(input)\n    if (normalized) {\n      onChange({\n        hex: normalized,\n        opacity: value?.opacity ?? 100,\n      })\n    }\n  }, [onChange, value?.opacity])\n\n  const handleHexInputBlur = useCallback(() => {\n    if (value?.hex) {\n      setHexInput(value.hex)\n    }\n  }, [value?.hex])\n\n  const handleOpacityChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newOpacity = parseInt(e.target.value, 10)\n    if (value?.hex) {\n      onChange({\n        hex: value.hex,\n        opacity: newOpacity,\n      })\n    }\n  }, [onChange, value?.hex])\n\n  const handlePresetClick = useCallback((preset: { hex: string; label: string }) => {\n    onChange({\n      hex: preset.hex,\n      opacity: value?.opacity ?? 100,\n    })\n    setHexInput(preset.hex)\n  }, [onChange, value?.opacity])\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n    setHexInput('')\n  }, [onChange])\n\n  const previewColor = value?.hex\n    ? colorToRgba(value.hex, value.opacity ?? 100)\n    : 'transparent'\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {label && (\n        <label style={styles.label}>\n          {label}\n        </label>\n      )}\n\n      {/* Color picker and hex input row */}\n      <div style={styles.row}>\n        {/* Native color picker */}\n        <input\n          type=\"color\"\n          value={value?.hex || '#000000'}\n          onChange={handleColorChange}\n          disabled={readOnly}\n          style={{\n            ...styles.colorInput,\n            ...(readOnly ? { cursor: 'not-allowed', opacity: 0.5 } : {}),\n          }}\n        />\n\n        {/* Hex input */}\n        <input\n          type=\"text\"\n          value={hexInput}\n          onChange={handleHexInputChange}\n          onBlur={handleHexInputBlur}\n          placeholder=\"#000000\"\n          disabled={readOnly}\n          style={styles.hexInput}\n        />\n\n        {/* Preview swatch with checkerboard for transparency */}\n        <div\n          style={styles.previewSwatch as CSSProperties}\n          title={value?.hex ? `${value.hex} at ${value.opacity ?? 100}% opacity` : 'No color selected'}\n        >\n          <div style={styles.checkerboard as CSSProperties} />\n          <div style={{ ...styles.colorOverlay as CSSProperties, backgroundColor: previewColor }} />\n        </div>\n\n        {/* Clear button */}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            title=\"Clear color\"\n            style={styles.clearButton}\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Opacity slider */}\n      {showOpacity && value?.hex && (\n        <div style={styles.opacitySection as CSSProperties}>\n          <div style={styles.opacityHeader}>\n            <label style={styles.opacityLabel}>Opacity</label>\n            <span style={styles.opacityValue}>{value.opacity ?? 100}%</span>\n          </div>\n          {/* Custom opacity slider with checkerboard + color gradient */}\n          <div style={styles.opacitySlider as CSSProperties}>\n            {/* Checkerboard background */}\n            <div style={styles.checkerboard as CSSProperties} />\n            {/* Color gradient from transparent to solid */}\n            <div\n              style={{\n                ...styles.colorOverlay as CSSProperties,\n                background: `linear-gradient(to right, transparent 0%, ${value.hex} 100%)`,\n              }}\n            />\n            {/* Range input overlay */}\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={value.opacity ?? 100}\n              onChange={handleOpacityChange}\n              disabled={readOnly}\n              style={{\n                ...styles.opacityInput as CSSProperties,\n                ...(readOnly ? { cursor: 'not-allowed' } : {}),\n              }}\n            />\n            {/* Thumb indicator */}\n            <div\n              style={{\n                ...styles.opacityThumb as CSSProperties,\n                left: `calc(${value.opacity ?? 100}% - 2px)`,\n              }}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Preset swatches */}\n      {resolvedPresets.length > 0 && !readOnly && (\n        <div style={styles.presetsSection as CSSProperties}>\n          <label style={styles.presetsLabel}>Presets</label>\n          <div style={styles.presetsGrid}>\n            {resolvedPresets.map((preset) => {\n              const isSelected = value?.hex?.toLowerCase() === preset.hex.toLowerCase()\n              return (\n                <button\n                  key={preset.hex}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  style={{\n                    ...(isSelected ? styles.presetButtonSelected : styles.presetButton),\n                    backgroundColor: preset.hex,\n                  }}\n                  title={preset.label}\n                />\n              )\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport const ColorPickerField = memo(ColorPickerFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\n/**\n * Creates a Puck field configuration for color selection\n */\nexport function createColorPickerField(config: {\n  label?: string\n  showOpacity?: boolean\n  presets?: Array<{ hex: string; label: string }>\n}): CustomField<ColorValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <ColorPickerField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        showOpacity={config.showOpacity}\n        presets={config.presets}\n      />\n    ),\n  }\n}\n"],"names":["React","useState","useCallback","memo","X","useTheme","normalizeHex","hex","clean","replace","length","split","map","c","join","test","toLowerCase","colorToRgba","opacity","r","parseInt","substring","g","b","styles","container","display","flexDirection","gap","label","fontSize","fontWeight","color","row","alignItems","flexWrap","colorInput","width","height","padding","border","borderRadius","cursor","hexInput","flex","minWidth","fontFamily","backgroundColor","previewSwatch","flexShrink","position","overflow","checkerboard","inset","backgroundImage","backgroundSize","backgroundPosition","colorOverlay","clearButton","justifyContent","opacitySection","opacityHeader","opacityLabel","opacityValue","opacitySlider","opacityInput","margin","opacityThumb","top","bottom","boxShadow","pointerEvents","presetsSection","presetsLabel","presetsGrid","presetButton","outline","presetButtonSelected","outlineOffset","ColorPickerFieldInner","value","onChange","readOnly","showOpacity","presets","theme","resolvedPresets","colorPresets","setHexInput","handleColorChange","e","newHex","target","handleHexInputChange","input","normalized","handleHexInputBlur","handleOpacityChange","newOpacity","handlePresetClick","preset","handleClear","previewColor","div","className","style","type","disabled","onBlur","placeholder","title","button","onClick","span","background","min","max","left","isSelected","ColorPickerField","createColorPickerField","config","render"],"mappings":"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"}

package/dist/fields/ContentAlignmentField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentAlignmentField.d.ts","sourceRoot":"","sources":["../../src/fields/ContentAlignmentField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAOnD,2BAA2B;AAC3B,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAExD,yBAAyB;AACzB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;AAEtD,gDAAgD;AAChD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,CAAA;IAC3B,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wCAAwC;AACxC,MAAM,MAAM,aAAa,GACrB,UAAU,GAAG,YAAY,GAAG,WAAW,GACvC,aAAa,GAAG,QAAQ,GAAG,cAAc,GACzC,aAAa,GAAG,eAAe,GAAG,cAAc,CAAA;AAEpD,UAAU,0BAA0B;IAClC,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,qBAAqB,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC;AAkID,iBAAS,0BAA0B,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,KAA2B,EAC3B,QAAQ,EACR,YAAgC,GACjC,EAAE,0BAA0B,qBA2E5B;AAED,eAAO,MAAM,qBAAqB,8DAAmC,CAAA;AAMrE;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAmBrB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAarB;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,KAAK,CAAC,aAAa,CAYrB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,qBAAqB,GAAG,IAAI,GAAG,SAAS,GAClD,MAAM,CAgBR;AAMD,UAAU,iCAAiC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC;AAED;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,GAAE,iCAAsC,GAC7C,WAAW,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAc3C"}

package/dist/fields/ContentAlignmentField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/ContentAlignmentField.tsx"],"sourcesContent":["'use client'\n\n/**\n * ContentAlignmentField - Visual 3x3 grid selector for content positioning\n *\n * A d-pad style control for selecting content alignment within a container.\n * Works with both Flexbox (justify-content + align-items) and Grid (place-content).\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { X } from 'lucide-react'\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Horizontal alignment */\nexport type HorizontalAlign = 'start' | 'center' | 'end'\n\n/** Vertical alignment */\nexport type VerticalAlign = 'start' | 'center' | 'end'\n\n/** Combined alignment position (9 positions) */\nexport interface ContentAlignmentValue {\n  horizontal: HorizontalAlign\n  vertical: VerticalAlign\n}\n\n/** Position labels for accessibility */\nexport type PositionLabel =\n  | 'top-left' | 'top-center' | 'top-right'\n  | 'center-left' | 'center' | 'center-right'\n  | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\ninterface ContentAlignmentFieldProps {\n  value: ContentAlignmentValue | null\n  onChange: (value: ContentAlignmentValue | null) => void\n  label?: string\n  readOnly?: boolean\n  /** Default alignment when null */\n  defaultValue?: ContentAlignmentValue\n}\n\n// =============================================================================\n// Constants\n// =============================================================================\n\nconst DEFAULT_ALIGNMENT: ContentAlignmentValue = {\n  horizontal: 'center',\n  vertical: 'center',\n}\n\n/** Grid positions in order (row by row) */\nconst POSITIONS: Array<{ h: HorizontalAlign; v: VerticalAlign; label: PositionLabel }> = [\n  { h: 'start', v: 'start', label: 'top-left' },\n  { h: 'center', v: 'start', label: 'top-center' },\n  { h: 'end', v: 'start', label: 'top-right' },\n  { h: 'start', v: 'center', label: 'center-left' },\n  { h: 'center', v: 'center', label: 'center' },\n  { h: 'end', v: 'center', label: 'center-right' },\n  { h: 'start', v: 'end', label: 'bottom-left' },\n  { h: 'center', v: 'end', label: 'bottom-center' },\n  { h: 'end', v: 'end', label: 'bottom-right' },\n]\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  gridContainer: {\n    display: 'flex',\n    justifyContent: 'center',\n    padding: '8px 0',\n  } as CSSProperties,\n  grid: {\n    display: 'grid',\n    gridTemplateColumns: 'repeat(3, 28px)',\n    gridTemplateRows: 'repeat(3, 28px)',\n    gap: '3px',\n    padding: '4px',\n    backgroundColor: 'var(--theme-elevation-100)',\n    borderRadius: '8px',\n    border: '1px solid var(--theme-elevation-150)',\n  } as CSSProperties,\n  cell: {\n    width: '28px',\n    height: '28px',\n    border: '1px solid var(--theme-elevation-200)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    cursor: 'pointer',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    transition: 'all 0.15s ease',\n  } as CSSProperties,\n  cellActive: {\n    width: '28px',\n    height: '28px',\n    border: '2px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    transition: 'all 0.15s ease',\n  } as CSSProperties,\n  cellHover: {\n    borderColor: 'var(--theme-elevation-400)',\n    backgroundColor: 'var(--theme-elevation-50)',\n  } as CSSProperties,\n  cellDisabled: {\n    cursor: 'not-allowed',\n    opacity: 0.5,\n  } as CSSProperties,\n  dot: {\n    width: '8px',\n    height: '8px',\n    borderRadius: '50%',\n    backgroundColor: 'var(--theme-elevation-400)',\n  } as CSSProperties,\n  dotActive: {\n    width: '10px',\n    height: '10px',\n    borderRadius: '50%',\n    backgroundColor: 'var(--theme-bg)',\n  } as CSSProperties,\n  preview: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '8px',\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// ContentAlignmentField Component\n// =============================================================================\n\nfunction ContentAlignmentFieldInner({\n  value,\n  onChange,\n  label = 'Content Alignment',\n  readOnly,\n  defaultValue = DEFAULT_ALIGNMENT,\n}: ContentAlignmentFieldProps) {\n  const currentValue = value || defaultValue\n\n  const handleCellClick = useCallback(\n    (horizontal: HorizontalAlign, vertical: VerticalAlign) => {\n      if (readOnly) return\n      onChange({ horizontal, vertical })\n    },\n    [onChange, readOnly]\n  )\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const isActive = (h: HorizontalAlign, v: VerticalAlign) =>\n    currentValue.horizontal === h && currentValue.vertical === v\n\n  // Human-readable label for current position\n  const getPositionLabel = (h: HorizontalAlign, v: VerticalAlign): string => {\n    const vLabel = v === 'start' ? 'Top' : v === 'end' ? 'Bottom' : 'Middle'\n    const hLabel = h === 'start' ? 'Left' : h === 'end' ? 'Right' : 'Center'\n    if (h === 'center' && v === 'center') return 'Center'\n    return `${vLabel} ${hLabel}`\n  }\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header */}\n      <div style={styles.header}>\n        <label style={styles.label}>{label}</label>\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Reset to default\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* 3x3 Grid Selector */}\n      <div style={styles.gridContainer}>\n        <div style={styles.grid}>\n          {POSITIONS.map(({ h, v, label: posLabel }) => {\n            const active = isActive(h, v)\n            return (\n              <button\n                key={posLabel}\n                type=\"button\"\n                onClick={() => handleCellClick(h, v)}\n                disabled={readOnly}\n                style={{\n                  ...(active ? styles.cellActive : styles.cell),\n                  ...(readOnly ? styles.cellDisabled : {}),\n                }}\n                title={getPositionLabel(h, v)}\n                aria-label={getPositionLabel(h, v)}\n                aria-pressed={active}\n              >\n                <span style={active ? styles.dotActive : styles.dot} />\n              </button>\n            )\n          })}\n        </div>\n      </div>\n\n      {/* Current position label */}\n      <div style={styles.preview}>\n        {getPositionLabel(currentValue.horizontal, currentValue.vertical)}\n      </div>\n    </div>\n  )\n}\n\nexport const ContentAlignmentField = memo(ContentAlignmentFieldInner)\n\n// =============================================================================\n// CSS Helper Utilities\n// =============================================================================\n\n/**\n * Convert ContentAlignmentValue to Flexbox CSS properties\n * Use this when the container is display: flex\n */\nexport function alignmentToFlexCSS(\n  alignment: ContentAlignmentValue | null | undefined\n): React.CSSProperties {\n  if (!alignment) return {}\n\n  const justifyMap: Record<HorizontalAlign, string> = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n  }\n\n  const alignMap: Record<VerticalAlign, string> = {\n    start: 'flex-start',\n    center: 'center',\n    end: 'flex-end',\n  }\n\n  return {\n    justifyContent: justifyMap[alignment.horizontal],\n    alignItems: alignMap[alignment.vertical],\n  }\n}\n\n/**\n * Convert ContentAlignmentValue to Grid CSS properties\n * Use this when the container is display: grid\n */\nexport function alignmentToGridCSS(\n  alignment: ContentAlignmentValue | null | undefined\n): React.CSSProperties {\n  if (!alignment) return {}\n\n  const map: Record<HorizontalAlign | VerticalAlign, string> = {\n    start: 'start',\n    center: 'center',\n    end: 'end',\n  }\n\n  return {\n    justifyContent: map[alignment.horizontal],\n    alignContent: map[alignment.vertical],\n  }\n}\n\n/**\n * Convert ContentAlignmentValue to place-self CSS for grid items\n * Use this on individual items within a grid\n */\nexport function alignmentToPlaceSelfCSS(\n  alignment: ContentAlignmentValue | null | undefined\n): React.CSSProperties {\n  if (!alignment) return {}\n\n  const map: Record<HorizontalAlign | VerticalAlign, string> = {\n    start: 'start',\n    center: 'center',\n    end: 'end',\n  }\n\n  return {\n    placeSelf: `${map[alignment.vertical]} ${map[alignment.horizontal]}`,\n  }\n}\n\n/**\n * Get Tailwind classes for alignment\n * Returns both justify-* and items-* classes\n */\nexport function alignmentToTailwind(\n  alignment: ContentAlignmentValue | null | undefined\n): string {\n  if (!alignment) return ''\n\n  const justifyMap: Record<HorizontalAlign, string> = {\n    start: 'justify-start',\n    center: 'justify-center',\n    end: 'justify-end',\n  }\n\n  const alignMap: Record<VerticalAlign, string> = {\n    start: 'items-start',\n    center: 'items-center',\n    end: 'items-end',\n  }\n\n  return `${justifyMap[alignment.horizontal]} ${alignMap[alignment.vertical]}`\n}\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\ninterface CreateContentAlignmentFieldConfig {\n  label?: string\n  defaultValue?: ContentAlignmentValue\n}\n\n/**\n * Creates a Puck field configuration for content alignment\n *\n * @example\n * ```ts\n * fields: {\n *   contentAlignment: createContentAlignmentField({ label: 'Align Content' }),\n * }\n * ```\n */\nexport function createContentAlignmentField(\n  config: CreateContentAlignmentFieldConfig = {}\n): CustomField<ContentAlignmentValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <ContentAlignmentField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        defaultValue={config.defaultValue}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","X","DEFAULT_ALIGNMENT","horizontal","vertical","POSITIONS","h","v","label","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","fontSize","fontWeight","color","clearButton","width","height","padding","border","borderRadius","backgroundColor","cursor","gridContainer","grid","gridTemplateColumns","gridTemplateRows","cell","transition","cellActive","cellHover","borderColor","cellDisabled","opacity","dot","dotActive","preview","ContentAlignmentFieldInner","value","onChange","readOnly","defaultValue","currentValue","handleCellClick","handleClear","isActive","getPositionLabel","vLabel","hLabel","div","className","style","button","type","onClick","title","map","posLabel","active","disabled","aria-label","aria-pressed","span","ContentAlignmentField","alignmentToFlexCSS","alignment","justifyMap","start","center","end","alignMap","alignmentToGridCSS","alignContent","alignmentToPlaceSelfCSS","placeSelf","alignmentToTailwind","createContentAlignmentField","config","render"],"mappings":"AAAA;;AAEA;;;;;CAKC,GAED,OAAOA,SAASC,WAAW,EAAEC,IAAI,QAA4B,QAAO;AAEpE,SAASC,CAAC,QAAQ,eAAc;AAiChC,gFAAgF;AAChF,YAAY;AACZ,gFAAgF;AAEhF,MAAMC,oBAA2C;IAC/CC,YAAY;IACZC,UAAU;AACZ;AAEA,yCAAyC,GACzC,MAAMC,YAAmF;IACvF;QAAEC,GAAG;QAASC,GAAG;QAASC,OAAO;IAAW;IAC5C;QAAEF,GAAG;QAAUC,GAAG;QAASC,OAAO;IAAa;IAC/C;QAAEF,GAAG;QAAOC,GAAG;QAASC,OAAO;IAAY;IAC3C;QAAEF,GAAG;QAASC,GAAG;QAAUC,OAAO;IAAc;IAChD;QAAEF,GAAG;QAAUC,GAAG;QAAUC,OAAO;IAAS;IAC5C;QAAEF,GAAG;QAAOC,GAAG;QAAUC,OAAO;IAAe;IAC/C;QAAEF,GAAG;QAASC,GAAG;QAAOC,OAAO;IAAc;IAC7C;QAAEF,GAAG;QAAUC,GAAG;QAAOC,OAAO;IAAgB;IAChD;QAAEF,GAAG;QAAOC,GAAG;QAAOC,OAAO;IAAe;CAC7C;AAED,gFAAgF;AAChF,SAAS;AACT,gFAAgF;AAEhF,MAAMC,SAAS;IACbC,WAAW;QACTC,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,QAAQ;QACNH,SAAS;QACTI,YAAY;QACZC,gBAAgB;IAClB;IACAR,OAAO;QACLS,UAAU;QACVC,YAAY;QACZC,OAAO;IACT;IACAC,aAAa;QACXT,SAAS;QACTI,YAAY;QACZC,gBAAgB;QAChBK,OAAO;QACPC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,cAAc;QACdC,iBAAiB;QACjBP,OAAO;QACPQ,QAAQ;IACV;IACAC,eAAe;QACbjB,SAAS;QACTK,gBAAgB;QAChBO,SAAS;IACX;IACAM,MAAM;QACJlB,SAAS;QACTmB,qBAAqB;QACrBC,kBAAkB;QAClBlB,KAAK;QACLU,SAAS;QACTG,iBAAiB;QACjBD,cAAc;QACdD,QAAQ;IACV;IACAQ,MAAM;QACJX,OAAO;QACPC,QAAQ;QACRE,QAAQ;QACRC,cAAc;QACdC,iBAAiB;QACjBC,QAAQ;QACRhB,SAAS;QACTI,YAAY;QACZC,gBAAgB;QAChBiB,YAAY;IACd;IACAC,YAAY;QACVb,OAAO;QACPC,QAAQ;QACRE,QAAQ;QACRC,cAAc;QACdC,iBAAiB;QACjBC,QAAQ;QACRhB,SAAS;QACTI,YAAY;QACZC,gBAAgB;QAChBiB,YAAY;IACd;IACAE,WAAW;QACTC,aAAa;QACbV,iBAAiB;IACnB;IACAW,cAAc;QACZV,QAAQ;QACRW,SAAS;IACX;IACAC,KAAK;QACHlB,OAAO;QACPC,QAAQ;QACRG,cAAc;QACdC,iBAAiB;IACnB;IACAc,WAAW;QACTnB,OAAO;QACPC,QAAQ;QACRG,cAAc;QACdC,iBAAiB;IACnB;IACAe,SAAS;QACP9B,SAAS;QACTI,YAAY;QACZC,gBAAgB;QAChBH,KAAK;QACLI,UAAU;QACVE,OAAO;IACT;AACF;AAEA,gFAAgF;AAChF,kCAAkC;AAClC,gFAAgF;AAEhF,SAASuB,2BAA2B,EAClCC,KAAK,EACLC,QAAQ,EACRpC,QAAQ,mBAAmB,EAC3BqC,QAAQ,EACRC,eAAe5C,iBAAiB,EACL;IAC3B,MAAM6C,eAAeJ,SAASG;IAE9B,MAAME,kBAAkBjD,YACtB,CAACI,YAA6BC;QAC5B,IAAIyC,UAAU;QACdD,SAAS;YAAEzC;YAAYC;QAAS;IAClC,GACA;QAACwC;QAAUC;KAAS;IAGtB,MAAMI,cAAclD,YAAY;QAC9B6C,SAAS;IACX,GAAG;QAACA;KAAS;IAEb,MAAMM,WAAW,CAAC5C,GAAoBC,IACpCwC,aAAa5C,UAAU,KAAKG,KAAKyC,aAAa3C,QAAQ,KAAKG;IAE7D,4CAA4C;IAC5C,MAAM4C,mBAAmB,CAAC7C,GAAoBC;QAC5C,MAAM6C,SAAS7C,MAAM,UAAU,QAAQA,MAAM,QAAQ,WAAW;QAChE,MAAM8C,SAAS/C,MAAM,UAAU,SAASA,MAAM,QAAQ,UAAU;QAChE,IAAIA,MAAM,YAAYC,MAAM,UAAU,OAAO;QAC7C,OAAO,GAAG6C,OAAO,CAAC,EAAEC,QAAQ;IAC9B;IAEA,qBACE,MAACC;QAAIC,WAAU;QAAaC,OAAO/C,OAAOC,SAAS;;0BAEjD,MAAC4C;gBAAIE,OAAO/C,OAAOK,MAAM;;kCACvB,KAACN;wBAAMgD,OAAO/C,OAAOD,KAAK;kCAAGA;;oBAC5BmC,SAAS,CAACE,0BACT,KAACY;wBACCC,MAAK;wBACLC,SAASV;wBACTO,OAAO/C,OAAOW,WAAW;wBACzBwC,OAAM;kCAEN,cAAA,KAAC3D;4BAAEuD,OAAO;gCAAEnC,OAAO;gCAAQC,QAAQ;4BAAO;;;;;0BAMhD,KAACgC;gBAAIE,OAAO/C,OAAOmB,aAAa;0BAC9B,cAAA,KAAC0B;oBAAIE,OAAO/C,OAAOoB,IAAI;8BACpBxB,UAAUwD,GAAG,CAAC,CAAC,EAAEvD,CAAC,EAAEC,CAAC,EAAEC,OAAOsD,QAAQ,EAAE;wBACvC,MAAMC,SAASb,SAAS5C,GAAGC;wBAC3B,qBACE,KAACkD;4BAECC,MAAK;4BACLC,SAAS,IAAMX,gBAAgB1C,GAAGC;4BAClCyD,UAAUnB;4BACVW,OAAO;gCACL,GAAIO,SAAStD,OAAOyB,UAAU,GAAGzB,OAAOuB,IAAI;gCAC5C,GAAIa,WAAWpC,OAAO4B,YAAY,GAAG,CAAC,CAAC;4BACzC;4BACAuB,OAAOT,iBAAiB7C,GAAGC;4BAC3B0D,cAAYd,iBAAiB7C,GAAGC;4BAChC2D,gBAAcH;sCAEd,cAAA,KAACI;gCAAKX,OAAOO,SAAStD,OAAO+B,SAAS,GAAG/B,OAAO8B,GAAG;;2BAZ9CuB;oBAeX;;;0BAKJ,KAACR;gBAAIE,OAAO/C,OAAOgC,OAAO;0BACvBU,iBAAiBJ,aAAa5C,UAAU,EAAE4C,aAAa3C,QAAQ;;;;AAIxE;AAEA,OAAO,MAAMgE,sCAAwBpE,KAAK0C,4BAA2B;AAErE,gFAAgF;AAChF,uBAAuB;AACvB,gFAAgF;AAEhF;;;CAGC,GACD,OAAO,SAAS2B,mBACdC,SAAmD;IAEnD,IAAI,CAACA,WAAW,OAAO,CAAC;IAExB,MAAMC,aAA8C;QAClDC,OAAO;QACPC,QAAQ;QACRC,KAAK;IACP;IAEA,MAAMC,WAA0C;QAC9CH,OAAO;QACPC,QAAQ;QACRC,KAAK;IACP;IAEA,OAAO;QACL1D,gBAAgBuD,UAAU,CAACD,UAAUnE,UAAU,CAAC;QAChDY,YAAY4D,QAAQ,CAACL,UAAUlE,QAAQ,CAAC;IAC1C;AACF;AAEA;;;CAGC,GACD,OAAO,SAASwE,mBACdN,SAAmD;IAEnD,IAAI,CAACA,WAAW,OAAO,CAAC;IAExB,MAAMT,MAAuD;QAC3DW,OAAO;QACPC,QAAQ;QACRC,KAAK;IACP;IAEA,OAAO;QACL1D,gBAAgB6C,GAAG,CAACS,UAAUnE,UAAU,CAAC;QACzC0E,cAAchB,GAAG,CAACS,UAAUlE,QAAQ,CAAC;IACvC;AACF;AAEA;;;CAGC,GACD,OAAO,SAAS0E,wBACdR,SAAmD;IAEnD,IAAI,CAACA,WAAW,OAAO,CAAC;IAExB,MAAMT,MAAuD;QAC3DW,OAAO;QACPC,QAAQ;QACRC,KAAK;IACP;IAEA,OAAO;QACLK,WAAW,GAAGlB,GAAG,CAACS,UAAUlE,QAAQ,CAAC,CAAC,CAAC,EAAEyD,GAAG,CAACS,UAAUnE,UAAU,CAAC,EAAE;IACtE;AACF;AAEA;;;CAGC,GACD,OAAO,SAAS6E,oBACdV,SAAmD;IAEnD,IAAI,CAACA,WAAW,OAAO;IAEvB,MAAMC,aAA8C;QAClDC,OAAO;QACPC,QAAQ;QACRC,KAAK;IACP;IAEA,MAAMC,WAA0C;QAC9CH,OAAO;QACPC,QAAQ;QACRC,KAAK;IACP;IAEA,OAAO,GAAGH,UAAU,CAACD,UAAUnE,UAAU,CAAC,CAAC,CAAC,EAAEwE,QAAQ,CAACL,UAAUlE,QAAQ,CAAC,EAAE;AAC9E;AAWA;;;;;;;;;CASC,GACD,OAAO,SAAS6E,4BACdC,SAA4C,CAAC,CAAC;IAE9C,OAAO;QACLxB,MAAM;QACNlD,OAAO0E,OAAO1E,KAAK;QACnB2E,QAAQ,CAAC,EAAExC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,iBACpC,KAACuB;gBACCzB,OAAOA;gBACPC,UAAUA;gBACVpC,OAAO0E,OAAO1E,KAAK;gBACnBqC,UAAUA;gBACVC,cAAcoC,OAAOpC,YAAY;;IAGvC;AACF"}

package/dist/fields/DimensionsField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DimensionsField.d.ts","sourceRoot":"","sources":["../../src/fields/DimensionsField.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAYnD,OAAO,KAAK,EACV,eAAe,EAKhB,MAAM,aAAa,CAAA;AAOpB,UAAU,oBAAoB;IAC5B,KAAK,EAAE,eAAe,GAAG,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAobD,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,kBAAyB,EACzB,eAAsB,EACtB,mBAA2B,GAC5B,EAAE,oBAAoB,qBAubtB;AAED,eAAO,MAAM,eAAe,wDAA6B,CAAA;AAMzD,UAAU,2BAA2B;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,yDAAyD;IACzD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,GAAE,2BAAgC,GACvC,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC,CAgBrC"}

package/dist/fields/DimensionsField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/DimensionsField.tsx"],"sourcesContent":["'use client'\n\n/**\n * DimensionsField - Unified Puck field for width and height constraints\n *\n * This component provides:\n * - Width mode selector (Full, Contained, Custom)\n * - Min/max width controls\n * - Min/max height controls\n * - Content alignment (left, center, right)\n * - Progressive disclosure (simple vs advanced mode)\n * - Preset quick-select buttons for common widths\n */\n\nimport React, { useCallback, memo, useState, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport {\n  X,\n  AlignStartHorizontal,\n  AlignCenterHorizontal,\n  AlignEndHorizontal,\n  MoveHorizontal,\n  Square,\n  SlidersHorizontal,\n  ChevronDown,\n  ChevronUp,\n} from 'lucide-react'\nimport type {\n  DimensionsValue,\n  DimensionConstraint,\n  DimensionsUnit,\n  DimensionsMode,\n  ContentAlignment,\n} from './shared.js'\nimport { getDimensionsSummary } from './shared.js'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface DimensionsFieldProps {\n  value: DimensionsValue | null\n  onChange: (value: DimensionsValue | null) => void\n  label?: string\n  readOnly?: boolean\n  /** Show height controls (default: true) */\n  showHeightControls?: boolean\n  /** Show min controls in advanced mode (default: true) */\n  showMinControls?: boolean\n  /** Start with advanced mode expanded (default: false) */\n  defaultAdvancedMode?: boolean\n}\n\n// =============================================================================\n// Default Values\n// =============================================================================\n\nconst DEFAULT_VALUE: DimensionsValue = {\n  mode: 'full',\n  alignment: 'center',\n  maxWidth: {\n    value: 0,\n    unit: 'px',\n    enabled: false,\n  },\n  advancedMode: false,\n}\n\nconst WIDTH_PRESETS = [\n  { label: 'Narrow', value: 680 },\n  { label: 'Medium', value: 960 },\n  { label: 'Wide', value: 1200 },\n  { label: 'XL', value: 1440 },\n]\n\nconst WIDTH_UNITS: DimensionsUnit[] = ['px', 'rem', '%', 'vw']\nconst HEIGHT_UNITS: DimensionsUnit[] = ['px', 'rem', '%', 'vh']\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  modeGroup: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n  } as CSSProperties,\n  modeButton: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '4px',\n    padding: '4px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  modeButtonActive: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '4px',\n    padding: '4px 12px',\n    fontSize: '12px',\n    fontWeight: 500,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  controlsPanel: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n    padding: '12px',\n    backgroundColor: 'var(--theme-elevation-50)',\n    borderRadius: '6px',\n  } as CSSProperties,\n  sectionLabel: {\n    fontSize: '10px',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  presetGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '6px',\n  } as CSSProperties,\n  presetButtons: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: '4px',\n  } as CSSProperties,\n  presetButton: {\n    flex: '1 1 auto',\n    minWidth: '50px',\n    height: '28px',\n    padding: '0 8px',\n    fontSize: '12px',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n  } as CSSProperties,\n  presetButtonActive: {\n    flex: '1 1 auto',\n    minWidth: '50px',\n    height: '28px',\n    padding: '0 8px',\n    fontSize: '12px',\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap',\n  } as CSSProperties,\n  inputGroup: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '6px',\n  } as CSSProperties,\n  inputRow: {\n    display: 'flex',\n    alignItems: 'center',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  input: {\n    flex: 1,\n    minWidth: '80px',\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '14px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  unitGroup: {\n    display: 'flex',\n    flexShrink: 0,\n    gap: '4px',\n  } as CSSProperties,\n  unitButton: {\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  unitButtonActive: {\n    height: '32px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  footer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    flexWrap: 'wrap',\n    gap: '8px',\n  } as CSSProperties,\n  alignGroup: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as CSSProperties,\n  alignLabel: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    flexShrink: 0,\n  } as CSSProperties,\n  alignButtons: {\n    display: 'flex',\n    gap: '4px',\n  } as CSSProperties,\n  alignButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  alignButtonActive: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  alignButtonDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n  summary: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n    fontFamily: 'monospace',\n  } as CSSProperties,\n  advancedToggle: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '100%',\n    padding: '8px 12px',\n    fontSize: '12px',\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  constraintRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n  } as CSSProperties,\n  checkboxLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n    cursor: 'pointer',\n    minWidth: '90px',\n  } as CSSProperties,\n  checkbox: {\n    width: '16px',\n    height: '16px',\n    accentColor: 'var(--theme-elevation-800)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  checkboxText: {\n    fontSize: '12px',\n    color: 'var(--theme-elevation-500)',\n  } as CSSProperties,\n  constraintInput: {\n    flex: 1,\n    minWidth: '60px',\n    height: '28px',\n    padding: '0 8px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-input-bg)',\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  smallUnitButton: {\n    height: '28px',\n    padding: '0 10px',\n    fontSize: '10px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  smallUnitButtonActive: {\n    height: '28px',\n    padding: '0 10px',\n    fontSize: '10px',\n    fontFamily: 'monospace',\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  constraintsSection: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  constraintsList: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n    paddingLeft: '4px',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// ConstraintInput Sub-component\n// =============================================================================\n\ninterface ConstraintInputProps {\n  label: string\n  constraint: DimensionConstraint | null | undefined\n  onChange: (constraint: DimensionConstraint) => void\n  onToggle: (enabled: boolean) => void\n  units: DimensionsUnit[]\n  disabled?: boolean\n  placeholder?: string\n}\n\nfunction ConstraintInput({\n  label,\n  constraint,\n  onChange,\n  onToggle,\n  units,\n  disabled,\n  placeholder = '0',\n}: ConstraintInputProps) {\n  const isEnabled = constraint?.enabled ?? false\n  const value = constraint?.value ?? 0\n  const unit = constraint?.unit ?? 'px'\n\n  const handleValueChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = parseInt(e.target.value, 10) || 0\n      onChange({\n        value: newValue,\n        unit,\n        enabled: isEnabled,\n      })\n    },\n    [unit, isEnabled, onChange]\n  )\n\n  const handleUnitChange = useCallback(\n    (newUnit: DimensionsUnit) => {\n      onChange({\n        value,\n        unit: newUnit,\n        enabled: isEnabled,\n      })\n    },\n    [value, isEnabled, onChange]\n  )\n\n  const handleToggle = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onToggle(e.target.checked)\n    },\n    [onToggle]\n  )\n\n  return (\n    <div style={styles.constraintRow}>\n      <label style={styles.checkboxLabel}>\n        <input\n          type=\"checkbox\"\n          checked={isEnabled}\n          onChange={handleToggle}\n          disabled={disabled}\n          style={styles.checkbox}\n        />\n        <span style={styles.checkboxText}>{label}</span>\n      </label>\n\n      <input\n        type=\"number\"\n        min={0}\n        value={isEnabled ? value : ''}\n        onChange={handleValueChange}\n        disabled={disabled || !isEnabled}\n        placeholder={placeholder}\n        style={{\n          ...styles.constraintInput,\n          ...(disabled || !isEnabled ? { opacity: 0.5 } : {}),\n        }}\n      />\n\n      <div style={{ display: 'flex', gap: '2px', flexShrink: 0 }}>\n        {units.map((u) => (\n          <button\n            key={u}\n            type=\"button\"\n            onClick={() => handleUnitChange(u)}\n            disabled={disabled || !isEnabled}\n            style={{\n              ...(unit === u && isEnabled ? styles.smallUnitButtonActive : styles.smallUnitButton),\n              ...(disabled || !isEnabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}),\n            }}\n          >\n            {u}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\n// =============================================================================\n// DimensionsField Component\n// =============================================================================\n\nfunction DimensionsFieldInner({\n  value,\n  onChange,\n  label,\n  readOnly,\n  showHeightControls = true,\n  showMinControls = true,\n  defaultAdvancedMode = false,\n}: DimensionsFieldProps) {\n  const currentValue = value || DEFAULT_VALUE\n  const [advancedMode, setAdvancedMode] = useState(\n    currentValue.advancedMode ?? defaultAdvancedMode\n  )\n\n  // Handle mode change\n  const handleModeChange = useCallback(\n    (mode: DimensionsMode) => {\n      if (mode === 'full') {\n        onChange({\n          ...currentValue,\n          mode,\n          alignment: 'center',\n        })\n      } else {\n        onChange({\n          ...currentValue,\n          mode,\n        })\n      }\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle max width value change\n  const handleMaxWidthChange = useCallback(\n    (constraint: DimensionConstraint) => {\n      onChange({\n        ...currentValue,\n        maxWidth: constraint,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle max width toggle\n  const handleMaxWidthToggle = useCallback(\n    (enabled: boolean) => {\n      onChange({\n        ...currentValue,\n        maxWidth: {\n          ...currentValue.maxWidth,\n          enabled,\n        },\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle min width change\n  const handleMinWidthChange = useCallback(\n    (constraint: DimensionConstraint) => {\n      onChange({\n        ...currentValue,\n        minWidth: constraint,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle min width toggle\n  const handleMinWidthToggle = useCallback(\n    (enabled: boolean) => {\n      onChange({\n        ...currentValue,\n        minWidth: enabled\n          ? { value: currentValue.minWidth?.value ?? 0, unit: currentValue.minWidth?.unit ?? 'px', enabled: true }\n          : { ...currentValue.minWidth!, enabled: false },\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle min height change\n  const handleMinHeightChange = useCallback(\n    (constraint: DimensionConstraint) => {\n      onChange({\n        ...currentValue,\n        minHeight: constraint,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle min height toggle\n  const handleMinHeightToggle = useCallback(\n    (enabled: boolean) => {\n      onChange({\n        ...currentValue,\n        minHeight: enabled\n          ? { value: currentValue.minHeight?.value ?? 0, unit: currentValue.minHeight?.unit ?? 'px', enabled: true }\n          : currentValue.minHeight ? { ...currentValue.minHeight, enabled: false } : null,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle max height change\n  const handleMaxHeightChange = useCallback(\n    (constraint: DimensionConstraint) => {\n      onChange({\n        ...currentValue,\n        maxHeight: constraint,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle max height toggle\n  const handleMaxHeightToggle = useCallback(\n    (enabled: boolean) => {\n      onChange({\n        ...currentValue,\n        maxHeight: enabled\n          ? { value: currentValue.maxHeight?.value ?? 0, unit: currentValue.maxHeight?.unit ?? 'px', enabled: true }\n          : currentValue.maxHeight ? { ...currentValue.maxHeight, enabled: false } : null,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle alignment change\n  const handleAlignmentChange = useCallback(\n    (alignment: ContentAlignment) => {\n      onChange({\n        ...currentValue,\n        alignment,\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle preset selection\n  const handlePresetSelect = useCallback(\n    (presetValue: number) => {\n      onChange({\n        ...currentValue,\n        mode: 'contained',\n        maxWidth: {\n          value: presetValue,\n          unit: 'px',\n          enabled: true,\n        },\n      })\n    },\n    [currentValue, onChange]\n  )\n\n  // Handle clear\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  // Handle advanced mode toggle\n  const handleAdvancedToggle = useCallback(() => {\n    const newAdvancedMode = !advancedMode\n    setAdvancedMode(newAdvancedMode)\n    if (value !== null) {\n      onChange({\n        ...currentValue,\n        advancedMode: newAdvancedMode,\n      })\n    }\n  }, [advancedMode, currentValue, onChange, value])\n\n  // Mode labels\n  const modeConfig = [\n    { mode: 'full' as DimensionsMode, icon: MoveHorizontal, label: 'Full', title: 'Full width (100%)' },\n    { mode: 'contained' as DimensionsMode, icon: Square, label: 'Contain', title: 'Contained (centered with max-width)' },\n    { mode: 'custom' as DimensionsMode, icon: SlidersHorizontal, label: 'Custom', title: 'Custom width settings' },\n  ]\n\n  const alignmentConfig = [\n    { alignment: 'left' as ContentAlignment, icon: AlignStartHorizontal, title: 'Align left' },\n    { alignment: 'center' as ContentAlignment, icon: AlignCenterHorizontal, title: 'Align center' },\n    { alignment: 'right' as ContentAlignment, icon: AlignEndHorizontal, title: 'Align right' },\n  ]\n\n  const showWidthControls = currentValue.mode !== 'full'\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      {/* Header with label and clear */}\n      <div style={styles.header}>\n        {label && (\n          <label style={styles.label}>{label}</label>\n        )}\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Reset to default\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      {/* Width Mode Selector */}\n      <div style={styles.modeGroup as CSSProperties}>\n        {modeConfig.map(({ mode, icon: Icon, label: modeLabel, title }) => {\n          const isActive = currentValue.mode === mode\n          return (\n            <button\n              key={mode}\n              type=\"button\"\n              onClick={() => handleModeChange(mode)}\n              disabled={readOnly}\n              style={isActive ? styles.modeButtonActive : styles.modeButton}\n              title={title}\n            >\n              <Icon style={{ width: '14px', height: '14px' }} />\n              {modeLabel}\n            </button>\n          )\n        })}\n      </div>\n\n      {/* Width Controls */}\n      {showWidthControls && (\n        <div style={styles.controlsPanel as CSSProperties}>\n          {/* Preset Quick Selects */}\n          <div style={styles.presetGroup as CSSProperties}>\n            <label style={styles.sectionLabel as CSSProperties}>Presets</label>\n            <div style={styles.presetButtons}>\n              {WIDTH_PRESETS.map((preset) => {\n                const isActive =\n                  currentValue.maxWidth.value === preset.value &&\n                  currentValue.maxWidth.unit === 'px' &&\n                  currentValue.maxWidth.enabled\n                return (\n                  <button\n                    key={preset.value}\n                    type=\"button\"\n                    onClick={() => handlePresetSelect(preset.value)}\n                    disabled={readOnly}\n                    style={isActive ? styles.presetButtonActive : styles.presetButton}\n                  >\n                    {preset.label}\n                  </button>\n                )\n              })}\n            </div>\n          </div>\n\n          {/* Simple Mode: Just Max Width */}\n          {!advancedMode && (\n            <div style={styles.inputGroup as CSSProperties}>\n              <label style={styles.sectionLabel as CSSProperties}>Max Width</label>\n              <div style={styles.inputRow}>\n                <input\n                  type=\"number\"\n                  min={0}\n                  value={currentValue.maxWidth.value}\n                  onChange={(e) =>\n                    handleMaxWidthChange({\n                      ...currentValue.maxWidth,\n                      value: parseInt(e.target.value, 10) || 0,\n                    })\n                  }\n                  disabled={readOnly}\n                  style={styles.input}\n                />\n                <div style={styles.unitGroup}>\n                  {WIDTH_UNITS.map((unit) => {\n                    const isActive = currentValue.maxWidth.unit === unit\n                    return (\n                      <button\n                        key={unit}\n                        type=\"button\"\n                        onClick={() =>\n                          handleMaxWidthChange({\n                            ...currentValue.maxWidth,\n                            unit,\n                          })\n                        }\n                        disabled={readOnly}\n                        style={isActive ? styles.unitButtonActive : styles.unitButton}\n                      >\n                        {unit}\n                      </button>\n                    )\n                  })}\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Advanced Mode */}\n          {advancedMode && (\n            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n              {/* Width Constraints */}\n              <div style={styles.constraintsSection as CSSProperties}>\n                <label style={styles.sectionLabel as CSSProperties}>\n                  Width Constraints\n                </label>\n                <div style={styles.constraintsList as CSSProperties}>\n                  {showMinControls && (\n                    <ConstraintInput\n                      label=\"Min Width\"\n                      constraint={currentValue.minWidth}\n                      onChange={handleMinWidthChange}\n                      onToggle={handleMinWidthToggle}\n                      units={WIDTH_UNITS}\n                      disabled={readOnly}\n                    />\n                  )}\n                  <ConstraintInput\n                    label=\"Max Width\"\n                    constraint={currentValue.maxWidth}\n                    onChange={handleMaxWidthChange}\n                    onToggle={handleMaxWidthToggle}\n                    units={WIDTH_UNITS}\n                    disabled={readOnly}\n                  />\n                </div>\n              </div>\n\n              {/* Height Constraints */}\n              {showHeightControls && (\n                <div style={styles.constraintsSection as CSSProperties}>\n                  <label style={styles.sectionLabel as CSSProperties}>\n                    Height Constraints\n                  </label>\n                  <div style={styles.constraintsList as CSSProperties}>\n                    {showMinControls && (\n                      <ConstraintInput\n                        label=\"Min Height\"\n                        constraint={currentValue.minHeight}\n                        onChange={handleMinHeightChange}\n                        onToggle={handleMinHeightToggle}\n                        units={HEIGHT_UNITS}\n                        disabled={readOnly}\n                      />\n                    )}\n                    <ConstraintInput\n                      label=\"Max Height\"\n                      constraint={currentValue.maxHeight}\n                      onChange={handleMaxHeightChange}\n                      onToggle={handleMaxHeightToggle}\n                      units={HEIGHT_UNITS}\n                      disabled={readOnly}\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Height Constraints for Full Mode (still allow height constraints) */}\n      {!showWidthControls && showHeightControls && advancedMode && (\n        <div style={styles.controlsPanel as CSSProperties}>\n          <label style={styles.sectionLabel as CSSProperties}>\n            Height Constraints\n          </label>\n          <div style={styles.constraintsList as CSSProperties}>\n            {showMinControls && (\n              <ConstraintInput\n                label=\"Min Height\"\n                constraint={currentValue.minHeight}\n                onChange={handleMinHeightChange}\n                onToggle={handleMinHeightToggle}\n                units={HEIGHT_UNITS}\n                disabled={readOnly}\n              />\n            )}\n            <ConstraintInput\n              label=\"Max Height\"\n              constraint={currentValue.maxHeight}\n              onChange={handleMaxHeightChange}\n              onToggle={handleMaxHeightToggle}\n              units={HEIGHT_UNITS}\n              disabled={readOnly}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Footer: Alignment + Summary + Advanced Toggle */}\n      <div style={styles.footer}>\n        {/* Alignment */}\n        <div style={styles.alignGroup}>\n          <label style={styles.alignLabel}>Align:</label>\n          <div style={styles.alignButtons}>\n            {alignmentConfig.map(({ alignment, icon: Icon, title }) => {\n              const isActive = currentValue.alignment === alignment\n              const isDisabled = readOnly || currentValue.mode === 'full'\n              return (\n                <button\n                  key={alignment}\n                  type=\"button\"\n                  onClick={() => handleAlignmentChange(alignment)}\n                  disabled={isDisabled}\n                  style={{\n                    ...(isActive ? styles.alignButtonActive : styles.alignButton),\n                    ...(isDisabled ? styles.alignButtonDisabled : {}),\n                  }}\n                  title={title}\n                >\n                  <Icon style={{ width: '14px', height: '14px' }} />\n                </button>\n              )\n            })}\n          </div>\n        </div>\n\n        {/* Value Summary */}\n        <span style={styles.summary}>\n          {getDimensionsSummary(currentValue)}\n        </span>\n      </div>\n\n      {/* Advanced Toggle */}\n      {(showHeightControls || showMinControls) && (\n        <button\n          type=\"button\"\n          onClick={handleAdvancedToggle}\n          disabled={readOnly}\n          style={styles.advancedToggle}\n        >\n          {advancedMode ? (\n            <>\n              <ChevronUp style={{ width: '14px', height: '14px', marginRight: '4px' }} />\n              Hide Advanced\n            </>\n          ) : (\n            <>\n              <ChevronDown style={{ width: '14px', height: '14px', marginRight: '4px' }} />\n              Show Advanced\n            </>\n          )}\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport const DimensionsField = memo(DimensionsFieldInner)\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\ninterface CreateDimensionsFieldConfig {\n  label?: string\n  /** Show height controls (default: true) */\n  showHeightControls?: boolean\n  /** Show min controls in advanced mode (default: true) */\n  showMinControls?: boolean\n  /** Start with advanced mode expanded (default: false) */\n  defaultAdvancedMode?: boolean\n}\n\n/**\n * Creates a Puck field configuration for dimensions control\n */\nexport function createDimensionsField(\n  config: CreateDimensionsFieldConfig = {}\n): CustomField<DimensionsValue | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <DimensionsField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        showHeightControls={config.showHeightControls}\n        showMinControls={config.showMinControls}\n        defaultAdvancedMode={config.defaultAdvancedMode}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","useState","X","AlignStartHorizontal","AlignCenterHorizontal","AlignEndHorizontal","MoveHorizontal","Square","SlidersHorizontal","ChevronDown","ChevronUp","getDimensionsSummary","DEFAULT_VALUE","mode","alignment","maxWidth","value","unit","enabled","advancedMode","WIDTH_PRESETS","label","WIDTH_UNITS","HEIGHT_UNITS","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","fontSize","fontWeight","color","clearButton","width","height","padding","border","borderRadius","backgroundColor","cursor","modeGroup","flexWrap","modeButton","modeButtonActive","controlsPanel","sectionLabel","textTransform","letterSpacing","presetGroup","presetButtons","presetButton","flex","minWidth","whiteSpace","presetButtonActive","inputGroup","inputRow","input","fontFamily","unitGroup","flexShrink","unitButton","unitButtonActive","footer","alignGroup","alignLabel","alignButtons","alignButton","alignButtonActive","alignButtonDisabled","opacity","summary","advancedToggle","constraintRow","checkboxLabel","checkbox","accentColor","checkboxText","constraintInput","smallUnitButton","smallUnitButtonActive","constraintsSection","constraintsList","paddingLeft","ConstraintInput","constraint","onChange","onToggle","units","disabled","placeholder","isEnabled","handleValueChange","e","newValue","parseInt","target","handleUnitChange","newUnit","handleToggle","checked","div","style","type","span","min","map","u","button","onClick","DimensionsFieldInner","readOnly","showHeightControls","showMinControls","defaultAdvancedMode","currentValue","setAdvancedMode","handleModeChange","handleMaxWidthChange","handleMaxWidthToggle","handleMinWidthChange","handleMinWidthToggle","handleMinHeightChange","minHeight","handleMinHeightToggle","handleMaxHeightChange","maxHeight","handleMaxHeightToggle","handleAlignmentChange","handlePresetSelect","presetValue","handleClear","handleAdvancedToggle","newAdvancedMode","modeConfig","icon","title","alignmentConfig","showWidthControls","className","Icon","modeLabel","isActive","preset","isDisabled","marginRight","DimensionsField","createDimensionsField","config","render"],"mappings":"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"}

package/dist/fields/FlexAlignmentField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexAlignmentField.d.ts","sourceRoot":"","sources":["../../src/fields/FlexAlignmentField.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAgD,MAAM,OAAO,CAAA;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAkBnD,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,CAAA;AACpG,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;AAEzE,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,GAAG,IAAI,CAAA;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,cAAc,CAAA;CAC9B;AAED,UAAU,oBAAoB;IAC5B,KAAK,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,UAAU,CAAA;CAC1B;AA2ED,iBAAS,wBAAwB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAyB,EACzB,QAAQ,EACR,YAA2B,GAC5B,EAAE,wBAAwB,qBA2D1B;AAED,eAAO,MAAM,mBAAmB,4DAAiC,CAAA;AAMjE,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,KAAqB,EACrB,QAAQ,EACR,YAAuB,GACxB,EAAE,oBAAoB,qBA0DtB;AAED,eAAO,MAAM,eAAe,wDAA6B,CAAA;AAMzD,UAAU,+BAA+B;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,cAAc,CAAA;CAC9B;AAED,UAAU,2BAA2B;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,UAAU,CAAA;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CACvC,MAAM,GAAE,+BAAoC,GAC3C,WAAW,CAAC,cAAc,GAAG,IAAI,CAAC,CAcpC;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,GAAE,2BAAgC,GACvC,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,CAchC"}

package/dist/fields/FlexAlignmentField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/FlexAlignmentField.tsx"],"sourcesContent":["'use client'\n\n/**\n * FlexAlignmentField - Icon toggle buttons for flexbox alignment properties\n *\n * Provides two specialized fields:\n * - JustifyContentField: Controls main-axis distribution (horizontal in row, vertical in column)\n * - AlignItemsField: Controls cross-axis alignment (vertical in row, horizontal in column)\n */\n\nimport React, { useCallback, memo, type CSSProperties } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport {\n  AlignLeft,\n  AlignCenter,\n  AlignRight,\n  AlignHorizontalDistributeCenter,\n  GripHorizontal,\n  AlignStartVertical,\n  AlignCenterVertical,\n  AlignEndVertical,\n  MoveVertical,\n  X,\n} from 'lucide-react'\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'\nexport type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch'\n\ninterface JustifyContentFieldProps {\n  value: JustifyContent | null\n  onChange: (value: JustifyContent | null) => void\n  label?: string\n  readOnly?: boolean\n  defaultValue?: JustifyContent\n}\n\ninterface AlignItemsFieldProps {\n  value: AlignItems | null\n  onChange: (value: AlignItems | null) => void\n  label?: string\n  readOnly?: boolean\n  defaultValue?: AlignItems\n}\n\n// =============================================================================\n// Styles\n// =============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '8px',\n  } as CSSProperties,\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  } as CSSProperties,\n  label: {\n    fontSize: '14px',\n    fontWeight: 500,\n    color: 'var(--theme-elevation-800)',\n  } as CSSProperties,\n  clearButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    padding: 0,\n    border: 'none',\n    borderRadius: '4px',\n    backgroundColor: 'transparent',\n    color: 'var(--theme-elevation-500)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  buttonGroup: {\n    display: 'flex',\n    gap: '4px',\n  } as CSSProperties,\n  button: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-150)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-bg)',\n    color: 'var(--theme-elevation-700)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  buttonActive: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '32px',\n    height: '32px',\n    padding: 0,\n    border: '1px solid var(--theme-elevation-800)',\n    borderRadius: '4px',\n    backgroundColor: 'var(--theme-elevation-800)',\n    color: 'var(--theme-bg)',\n    cursor: 'pointer',\n  } as CSSProperties,\n  buttonDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed',\n  } as CSSProperties,\n}\n\n// =============================================================================\n// JustifyContentField Component\n// =============================================================================\n\nfunction JustifyContentFieldInner({\n  value,\n  onChange,\n  label = 'Justify Content',\n  readOnly,\n  defaultValue = 'flex-start',\n}: JustifyContentFieldProps) {\n  const currentValue = value ?? defaultValue\n\n  const handleChange = useCallback((justifyContent: JustifyContent) => {\n    onChange(justifyContent)\n  }, [onChange])\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const options = [\n    { value: 'flex-start' as JustifyContent, icon: AlignLeft, title: 'Start' },\n    { value: 'center' as JustifyContent, icon: AlignCenter, title: 'Center' },\n    { value: 'flex-end' as JustifyContent, icon: AlignRight, title: 'End' },\n    { value: 'space-between' as JustifyContent, icon: AlignHorizontalDistributeCenter, title: 'Space Between' },\n    { value: 'space-around' as JustifyContent, icon: GripHorizontal, title: 'Space Around' },\n  ]\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      <div style={styles.header}>\n        <label style={styles.label}>\n          {label}\n        </label>\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Reset to default\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      <div style={styles.buttonGroup}>\n        {options.map(({ value: optionValue, icon: Icon, title }) => {\n          const isActive = currentValue === optionValue\n          return (\n            <button\n              key={optionValue}\n              type=\"button\"\n              onClick={() => handleChange(optionValue)}\n              disabled={readOnly}\n              style={{\n                ...(isActive ? styles.buttonActive : styles.button),\n                ...(readOnly ? styles.buttonDisabled : {}),\n              }}\n              title={title}\n            >\n              <Icon style={{ width: '16px', height: '16px' }} />\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport const JustifyContentField = memo(JustifyContentFieldInner)\n\n// =============================================================================\n// AlignItemsField Component\n// =============================================================================\n\nfunction AlignItemsFieldInner({\n  value,\n  onChange,\n  label = 'Align Items',\n  readOnly,\n  defaultValue = 'center',\n}: AlignItemsFieldProps) {\n  const currentValue = value ?? defaultValue\n\n  const handleChange = useCallback((alignItems: AlignItems) => {\n    onChange(alignItems)\n  }, [onChange])\n\n  const handleClear = useCallback(() => {\n    onChange(null)\n  }, [onChange])\n\n  const options = [\n    { value: 'flex-start' as AlignItems, icon: AlignStartVertical, title: 'Start' },\n    { value: 'center' as AlignItems, icon: AlignCenterVertical, title: 'Center' },\n    { value: 'flex-end' as AlignItems, icon: AlignEndVertical, title: 'End' },\n    { value: 'stretch' as AlignItems, icon: MoveVertical, title: 'Stretch' },\n  ]\n\n  return (\n    <div className=\"puck-field\" style={styles.container}>\n      <div style={styles.header}>\n        <label style={styles.label}>\n          {label}\n        </label>\n        {value && !readOnly && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            style={styles.clearButton}\n            title=\"Reset to default\"\n          >\n            <X style={{ width: '16px', height: '16px' }} />\n          </button>\n        )}\n      </div>\n\n      <div style={styles.buttonGroup}>\n        {options.map(({ value: optionValue, icon: Icon, title }) => {\n          const isActive = currentValue === optionValue\n          return (\n            <button\n              key={optionValue}\n              type=\"button\"\n              onClick={() => handleChange(optionValue)}\n              disabled={readOnly}\n              style={{\n                ...(isActive ? styles.buttonActive : styles.button),\n                ...(readOnly ? styles.buttonDisabled : {}),\n              }}\n              title={title}\n            >\n              <Icon style={{ width: '16px', height: '16px' }} />\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nexport const AlignItemsField = memo(AlignItemsFieldInner)\n\n// =============================================================================\n// Field Configuration Factories\n// =============================================================================\n\ninterface CreateJustifyContentFieldConfig {\n  label?: string\n  defaultValue?: JustifyContent\n}\n\ninterface CreateAlignItemsFieldConfig {\n  label?: string\n  defaultValue?: AlignItems\n}\n\n/**\n * Creates a Puck field configuration for flex justify-content control\n *\n * @example\n * ```ts\n * fields: {\n *   justifyContent: createJustifyContentField({ label: 'Justify Content' }),\n * }\n * ```\n */\nexport function createJustifyContentField(\n  config: CreateJustifyContentFieldConfig = {}\n): CustomField<JustifyContent | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <JustifyContentField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        defaultValue={config.defaultValue}\n      />\n    ),\n  }\n}\n\n/**\n * Creates a Puck field configuration for flex align-items control\n *\n * @example\n * ```ts\n * fields: {\n *   alignItems: createAlignItemsField({ label: 'Align Items' }),\n * }\n * ```\n */\nexport function createAlignItemsField(\n  config: CreateAlignItemsFieldConfig = {}\n): CustomField<AlignItems | null> {\n  return {\n    type: 'custom',\n    label: config.label,\n    render: ({ value, onChange, readOnly }) => (\n      <AlignItemsField\n        value={value}\n        onChange={onChange}\n        label={config.label}\n        readOnly={readOnly}\n        defaultValue={config.defaultValue}\n      />\n    ),\n  }\n}\n"],"names":["React","useCallback","memo","AlignLeft","AlignCenter","AlignRight","AlignHorizontalDistributeCenter","GripHorizontal","AlignStartVertical","AlignCenterVertical","AlignEndVertical","MoveVertical","X","styles","container","display","flexDirection","gap","header","alignItems","justifyContent","label","fontSize","fontWeight","color","clearButton","width","height","padding","border","borderRadius","backgroundColor","cursor","buttonGroup","button","buttonActive","buttonDisabled","opacity","JustifyContentFieldInner","value","onChange","readOnly","defaultValue","currentValue","handleChange","handleClear","options","icon","title","div","className","style","type","onClick","map","optionValue","Icon","isActive","disabled","JustifyContentField","AlignItemsFieldInner","AlignItemsField","createJustifyContentField","config","render","createAlignItemsField"],"mappings":"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"}

package/dist/fields/FolderPickerField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FolderPickerField.d.ts","sourceRoot":"","sources":["../../src/fields/FolderPickerField.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAcnD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAkUD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,KAAgB,EAChB,UAA8B,GAC/B,EAAE,sBAAsB,qBAmKxB;AAMD;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,CAAC,EAAE;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,GAAG,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,CAa7B"}

package/dist/fields/FolderPickerField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/FolderPickerField.tsx"],"sourcesContent":["'use client'\n\n/**\n * FolderPickerField - Custom Puck field for folder selection\n *\n * Integrates with @delmaredigital/payload-page-tree to allow\n * selecting folders from within the Puck editor.\n */\n\nimport React, { useState, useEffect } from 'react'\nimport type { CustomField } from '@puckeditor/core'\nimport { Folder, FolderOpen, FolderPlus, ChevronRight, ChevronDown, Check, X } from 'lucide-react'\n\n// =============================================================================\n// Types\n// =============================================================================\n\ninterface FolderNode {\n  id: string\n  name: string\n  pathSegment?: string\n  children?: FolderNode[]\n}\n\ninterface FolderPickerFieldProps {\n  value: string | null\n  onChange: (value: string | null) => void\n  label?: string\n  folderSlug?: string\n}\n\ninterface FolderTreeProps {\n  folders: FolderNode[]\n  selectedId: string | null\n  onSelect: (folderId: string | null) => void\n  expandedIds: Set<string>\n  onToggleExpand: (folderId: string) => void\n  level?: number\n}\n\n// =============================================================================\n// Folder Path Hook\n// =============================================================================\n\n/**\n * Fetches the folder path for display\n */\nfunction useFolderPath(folderId: string | null, folderSlug: string = 'payload-folders') {\n  const [folderPath, setFolderPath] = useState<string | null>(null)\n  const [loading, setLoading] = useState(false)\n\n  useEffect(() => {\n    if (!folderId) {\n      setFolderPath(null)\n      return\n    }\n\n    async function fetchPath() {\n      setLoading(true)\n      try {\n        // Fetch folder and build path by traversing parents\n        const response = await fetch(`/api/${folderSlug}/${folderId}?depth=2`)\n        if (!response.ok) {\n          setFolderPath(null)\n          return\n        }\n\n        const folder = await response.json()\n        const pathParts: string[] = []\n\n        // Build path from folder hierarchy\n        let current = folder\n        while (current) {\n          if (current.pathSegment || current.name) {\n            pathParts.unshift(current.pathSegment || current.name)\n          }\n          current = current.folder\n        }\n\n        setFolderPath(pathParts.length > 0 ? `/${pathParts.join('/')}` : null)\n      } catch (error) {\n        console.error('Error fetching folder path:', error)\n        setFolderPath(null)\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    fetchPath()\n  }, [folderId, folderSlug])\n\n  return { folderPath, loading }\n}\n\n/**\n * Fetches all folders for the tree\n */\nfunction useFolders(folderSlug: string = 'payload-folders') {\n  const [folders, setFolders] = useState<FolderNode[]>([])\n  const [loading, setLoading] = useState(true)\n  const [fetchCount, setFetchCount] = useState(0)\n\n  const refetch = () => setFetchCount((c) => c + 1)\n\n  useEffect(() => {\n    async function fetchFolders() {\n      setLoading(true)\n      try {\n        const response = await fetch(`/api/${folderSlug}?limit=1000&sort=name`)\n        if (!response.ok) {\n          setFolders([])\n          return\n        }\n\n        const data = await response.json()\n        const allFolders = data.docs || []\n\n        // Build tree structure\n        const folderMap = new Map<string, FolderNode>()\n        const rootFolders: FolderNode[] = []\n\n        // First pass: create all nodes\n        for (const folder of allFolders) {\n          folderMap.set(folder.id, {\n            id: folder.id,\n            name: folder.name,\n            pathSegment: folder.pathSegment,\n            children: [],\n          })\n        }\n\n        // Second pass: build hierarchy\n        for (const folder of allFolders) {\n          const node = folderMap.get(folder.id)!\n          const parentId = typeof folder.folder === 'object' ? folder.folder?.id : folder.folder\n\n          if (parentId && folderMap.has(parentId)) {\n            folderMap.get(parentId)!.children!.push(node)\n          } else {\n            rootFolders.push(node)\n          }\n        }\n\n        // Sort children by name\n        const sortChildren = (nodes: FolderNode[]) => {\n          nodes.sort((a, b) => a.name.localeCompare(b.name))\n          for (const node of nodes) {\n            if (node.children?.length) {\n              sortChildren(node.children)\n            }\n          }\n        }\n        sortChildren(rootFolders)\n\n        setFolders(rootFolders)\n      } catch (error) {\n        console.error('Error fetching folders:', error)\n        setFolders([])\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    fetchFolders()\n  }, [folderSlug, fetchCount])\n\n  return { folders, loading, refetch }\n}\n\n// =============================================================================\n// FolderTree Component\n// =============================================================================\n\nfunction FolderTreeItem({\n  folder,\n  selectedId,\n  onSelect,\n  expandedIds,\n  onToggleExpand,\n  level = 0,\n}: {\n  folder: FolderNode\n  selectedId: string | null\n  onSelect: (folderId: string | null) => void\n  expandedIds: Set<string>\n  onToggleExpand: (folderId: string) => void\n  level?: number\n}) {\n  const hasChildren = folder.children && folder.children.length > 0\n  const isExpanded = expandedIds.has(folder.id)\n  const isSelected = folder.id === selectedId\n\n  return (\n    <div>\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: '6px 8px',\n          paddingLeft: `${8 + level * 16}px`,\n          cursor: 'pointer',\n          borderRadius: '4px',\n          backgroundColor: isSelected ? 'var(--puck-color-azure-12)' : 'transparent',\n          transition: 'background-color 0.1s ease',\n        }}\n        onClick={() => onSelect(folder.id)}\n        onMouseEnter={(e) => {\n          if (!isSelected) {\n            e.currentTarget.style.backgroundColor = 'var(--puck-color-grey-11)'\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!isSelected) {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }\n        }}\n      >\n        {/* Expand/collapse button */}\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onToggleExpand(folder.id)\n            }}\n            style={{\n              background: 'none',\n              border: 'none',\n              padding: '2px',\n              cursor: 'pointer',\n              color: 'var(--puck-color-grey-05)',\n              display: 'flex',\n              alignItems: 'center',\n            }}\n          >\n            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n          </button>\n        ) : (\n          <span style={{ width: '18px' }} />\n        )}\n\n        {/* Folder icon */}\n        {isExpanded ? (\n          <FolderOpen size={16} style={{ marginRight: '8px', color: 'var(--puck-color-azure-06)' }} />\n        ) : (\n          <Folder size={16} style={{ marginRight: '8px', color: 'var(--puck-color-grey-05)' }} />\n        )}\n\n        {/* Folder name */}\n        <span\n          style={{\n            fontSize: '14px',\n            color: isSelected ? 'var(--puck-color-azure-04)' : 'var(--puck-color-grey-04)',\n            flex: 1,\n          }}\n        >\n          {folder.name}\n        </span>\n\n        {/* Selected indicator */}\n        {isSelected && (\n          <Check size={14} style={{ color: 'var(--puck-color-azure-04)' }} />\n        )}\n      </div>\n\n      {/* Children */}\n      {hasChildren && isExpanded && (\n        <div>\n          {folder.children!.map((child) => (\n            <FolderTreeItem\n              key={child.id}\n              folder={child}\n              selectedId={selectedId}\n              onSelect={onSelect}\n              expandedIds={expandedIds}\n              onToggleExpand={onToggleExpand}\n              level={level + 1}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction FolderTree({\n  folders,\n  selectedId,\n  onSelect,\n  expandedIds,\n  onToggleExpand,\n}: FolderTreeProps) {\n  if (folders.length === 0) {\n    return (\n      <div style={{ padding: '16px', textAlign: 'center', color: 'var(--puck-color-grey-05)' }}>\n        No folders found\n      </div>\n    )\n  }\n\n  return (\n    <div style={{ maxHeight: '300px', overflowY: 'auto' }}>\n      {/* Root option */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: '6px 8px',\n          cursor: 'pointer',\n          borderRadius: '4px',\n          backgroundColor: selectedId === null ? 'var(--puck-color-azure-12)' : 'transparent',\n          borderBottom: '1px solid var(--puck-color-grey-09)',\n          marginBottom: '4px',\n        }}\n        onClick={() => onSelect(null)}\n      >\n        <Folder size={16} style={{ marginRight: '8px', color: 'var(--puck-color-grey-05)' }} />\n        <span\n          style={{\n            fontSize: '14px',\n            color: selectedId === null ? 'var(--puck-color-azure-04)' : 'var(--puck-color-grey-04)',\n            fontStyle: 'italic',\n            flex: 1,\n          }}\n        >\n          (No folder - root level)\n        </span>\n        {selectedId === null && (\n          <Check size={14} style={{ color: 'var(--puck-color-azure-04)' }} />\n        )}\n      </div>\n\n      {/* Folder tree */}\n      {folders.map((folder) => (\n        <FolderTreeItem\n          key={folder.id}\n          folder={folder}\n          selectedId={selectedId}\n          onSelect={onSelect}\n          expandedIds={expandedIds}\n          onToggleExpand={onToggleExpand}\n        />\n      ))}\n    </div>\n  )\n}\n\n// =============================================================================\n// FolderPickerField Component\n// =============================================================================\n\nexport function FolderPickerField({\n  value,\n  onChange,\n  label = 'Folder',\n  folderSlug = 'payload-folders',\n}: FolderPickerFieldProps) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())\n  const { folderPath, loading: pathLoading } = useFolderPath(value, folderSlug)\n  const { folders, loading: foldersLoading, refetch } = useFolders(folderSlug)\n\n  const handleToggleExpand = (folderId: string) => {\n    setExpandedIds((prev) => {\n      const next = new Set(prev)\n      if (next.has(folderId)) {\n        next.delete(folderId)\n      } else {\n        next.add(folderId)\n      }\n      return next\n    })\n  }\n\n  const handleSelect = (folderId: string | null) => {\n    onChange(folderId)\n    setIsOpen(false)\n  }\n\n  const handleOpenDropdown = () => {\n    if (!isOpen) {\n      // Refetch folders when opening to get any newly created ones\n      refetch()\n    }\n    setIsOpen(!isOpen)\n  }\n\n  return (\n    <div className=\"puck-field\" style={{ position: 'relative' }}>\n      {/* Label */}\n      <label style={{ display: 'block', fontSize: '14px', fontWeight: 500, color: 'var(--puck-color-grey-04)', marginBottom: '8px' }}>\n        {label}\n      </label>\n\n      {/* Current folder display / trigger */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: '8px 12px',\n          border: '1px solid var(--puck-color-grey-09)',\n          borderRadius: '6px',\n          backgroundColor: 'var(--puck-color-white)',\n          cursor: 'pointer',\n        }}\n        onClick={handleOpenDropdown}\n      >\n        <Folder size={16} style={{ marginRight: '8px', color: 'var(--puck-color-grey-05)' }} />\n        <span\n          style={{\n            flex: 1,\n            fontSize: '14px',\n            color: value ? 'var(--puck-color-grey-04)' : 'var(--puck-color-grey-06)',\n            fontStyle: value ? 'normal' : 'italic',\n          }}\n        >\n          {pathLoading ? 'Loading...' : folderPath || '(Root level)'}\n        </span>\n        <ChevronDown\n          size={16}\n          style={{\n            color: 'var(--puck-color-grey-05)',\n            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n            transition: 'transform 0.2s ease',\n          }}\n        />\n      </div>\n\n      {/* Folder picker dropdown */}\n      {isOpen && (\n        <div\n          style={{\n            position: 'absolute',\n            top: '100%',\n            left: 0,\n            right: 0,\n            marginTop: '4px',\n            backgroundColor: 'var(--puck-color-white)',\n            border: '1px solid var(--puck-color-grey-09)',\n            borderRadius: '6px',\n            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n            zIndex: 1000,\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              padding: '8px 12px',\n              borderBottom: '1px solid var(--puck-color-grey-09)',\n            }}\n          >\n            <span style={{ fontSize: '14px', fontWeight: 500, color: 'var(--puck-color-grey-04)' }}>\n              Select Folder\n            </span>\n            <button\n              type=\"button\"\n              onClick={() => setIsOpen(false)}\n              style={{\n                background: 'none',\n                border: 'none',\n                padding: '4px',\n                cursor: 'pointer',\n                color: 'var(--puck-color-grey-05)',\n                display: 'flex',\n                alignItems: 'center',\n              }}\n            >\n              <X size={16} />\n            </button>\n          </div>\n\n          {/* Folder tree */}\n          <div style={{ padding: '8px' }}>\n            {foldersLoading ? (\n              <div style={{ padding: '16px', textAlign: 'center', color: 'var(--puck-color-grey-05)' }}>\n                Loading folders...\n              </div>\n            ) : (\n              <FolderTree\n                folders={folders}\n                selectedId={value}\n                onSelect={handleSelect}\n                expandedIds={expandedIds}\n                onToggleExpand={handleToggleExpand}\n              />\n            )}\n          </div>\n\n          {/* Create folder link - links to page-tree view where folders can be managed */}\n          <div\n            style={{\n              borderTop: '1px solid var(--puck-color-grey-09)',\n              padding: '8px 12px',\n            }}\n          >\n            <a\n              href=\"/admin/page-tree\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                fontSize: '13px',\n                color: 'var(--puck-color-azure-05)',\n                textDecoration: 'none',\n              }}\n              onClick={() => setIsOpen(false)}\n            >\n              <FolderPlus size={14} style={{ marginRight: '6px' }} />\n              Manage folders\n            </a>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\n// =============================================================================\n// Field Configuration Factory\n// =============================================================================\n\n/**\n * Creates a Puck field configuration for folder selection\n */\nexport function createFolderPickerField(config?: {\n  label?: string\n  folderSlug?: string\n}): CustomField<string | null> {\n  return {\n    type: 'custom',\n    label: config?.label ?? 'Folder',\n    render: ({ value, onChange }) => (\n      <FolderPickerField\n        value={value}\n        onChange={onChange}\n        label={config?.label}\n        folderSlug={config?.folderSlug}\n      />\n    ),\n  }\n}\n"],"names":["React","useState","useEffect","Folder","FolderOpen","FolderPlus","ChevronRight","ChevronDown","Check","X","useFolderPath","folderId","folderSlug","folderPath","setFolderPath","loading","setLoading","fetchPath","response","fetch","ok","folder","json","pathParts","current","pathSegment","name","unshift","length","join","error","console","useFolders","folders","setFolders","fetchCount","setFetchCount","refetch","c","fetchFolders","data","allFolders","docs","folderMap","Map","rootFolders","set","id","children","node","get","parentId","has","push","sortChildren","nodes","sort","a","b","localeCompare","FolderTreeItem","selectedId","onSelect","expandedIds","onToggleExpand","level","hasChildren","isExpanded","isSelected","div","style","display","alignItems","padding","paddingLeft","cursor","borderRadius","backgroundColor","transition","onClick","onMouseEnter","e","currentTarget","onMouseLeave","button","type","stopPropagation","background","border","color","size","span","width","marginRight","fontSize","flex","map","child","FolderTree","textAlign","maxHeight","overflowY","borderBottom","marginBottom","fontStyle","FolderPickerField","value","onChange","label","isOpen","setIsOpen","setExpandedIds","Set","pathLoading","foldersLoading","handleToggleExpand","prev","next","delete","add","handleSelect","handleOpenDropdown","className","position","fontWeight","transform","top","left","right","marginTop","boxShadow","zIndex","justifyContent","borderTop","href","target","rel","textDecoration","createFolderPickerField","config","render"],"mappings":"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"}

package/dist/fields/GradientEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GradientEditor.d.ts","sourceRoot":"","sources":["../../src/fields/GradientEditor.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAE9E,OAAO,KAAK,EAAE,aAAa,EAA4B,MAAM,aAAa,CAAA;AAO1E,UAAU,mBAAmB;IAC3B,KAAK,EAAE,aAAa,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AA2YD,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,qBA8L9E;AAED,eAAO,MAAM,cAAc,uDAA4B,CAAA"}