@brunoalz/smartgesti-site-editor 0.2.2 → 1.1.0

package/dist/editor/PropertyEditor/inputs/ImageGridInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageGridInput.js","sources":["../../../../src/editor/PropertyEditor/inputs/ImageGridInput.tsx"],"sourcesContent":["/**\n * ImageGridInput\n * Componente de edição para grid de imagens com seletor de preset visual\n */\n\nimport { useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport {\n  type ImageGridItem,\n  type ImageGridPreset,\n  gridPresetMap,\n  imageGridPresetIds,\n} from \"../../../engine/shared/imageGrid\";\nimport type { UploadConfig } from \"../../LandingPageEditorV2\";\n\ninterface ImageGridInputProps {\n  /** Preset atual */\n  preset?: ImageGridPreset;\n  /** Array de imagens */\n  images?: ImageGridItem[];\n  /** Gap em pixels */\n  gap?: number;\n  /** Callback para atualizar preset */\n  onPresetChange: (preset: ImageGridPreset) => void;\n  /** Callback para atualizar imagens */\n  onImagesChange: (images: ImageGridItem[]) => void;\n  /** Callback para atualizar gap */\n  onGapChange: (gap: number) => void;\n  /** Label do componente */\n  label?: string;\n  /** Descrição */\n  description?: string;\n  /** Configuração de upload (tenantId, authToken, etc) */\n  uploadConfig?: UploadConfig;\n}\n\n/**\n * Ícones visuais dos presets usando divs estilizadas\n */\nfunction PresetIcon({ preset, isActive }: { preset: ImageGridPreset; isActive: boolean }) {\n  const config = gridPresetMap[preset];\n\n  // Usar uma mini-grid visual para representar cada preset\n  const getPresetVisual = () => {\n    switch (preset) {\n      case \"single\":\n        return (\n          <div className=\"w-full h-full bg-current rounded-sm\" />\n        );\n      case \"two-horizontal\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"two-vertical\":\n        return (\n          <div className=\"w-full h-full grid grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"three-left\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm row-span-2\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"three-right\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm row-span-2\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"three-top\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm col-span-2\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"four-equal\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"w-8 h-8 p-1\",\n        isActive ? \"text-blue-500\" : \"text-gray-400 dark:text-gray-500\"\n      )}\n      title={config.name}\n    >\n      {getPresetVisual()}\n    </div>\n  );\n}\n\n/**\n * Slot de imagem individual com preview e upload\n */\nfunction ImageSlot({\n  index,\n  image,\n  onChange,\n  onRemove,\n}: {\n  index: number;\n  image?: ImageGridItem;\n  onChange: (image: ImageGridItem) => void;\n  onRemove: () => void;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n\n    // Validação básica\n    if (!file.type.startsWith(\"image/\")) {\n      alert(\"Apenas imagens são permitidas\");\n      return;\n    }\n\n    if (file.size > 10 * 1024 * 1024) {\n      alert(\"Arquivo muito grande. Máximo: 10MB\");\n      return;\n    }\n\n    // Usar Data URL para preview (deferUpload mode)\n    const reader = new FileReader();\n    reader.onload = (evt) => {\n      const dataUrl = evt.target?.result as string;\n      onChange({ src: dataUrl, alt: image?.alt || \"\" });\n    };\n    reader.readAsDataURL(file);\n  };\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.value = \"\"; // Reset para permitir selecionar o mesmo arquivo\n      inputRef.current.click();\n    }\n  };\n\n  return (\n    <div className=\"relative group\">\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        className=\"hidden\"\n      />\n\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={cn(\n          \"w-16 h-16 rounded-lg overflow-hidden border-2 transition-all\",\n          \"flex items-center justify-center\",\n          \"bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700\",\n          image?.src\n            ? \"border-blue-400 dark:border-blue-500\"\n            : \"border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400\"\n        )}\n      >\n        {image?.src ? (\n          <img\n            src={image.src}\n            alt={image.alt || `Imagem ${index + 1}`}\n            className=\"w-full h-full object-cover\"\n          />\n        ) : (\n          <svg\n            className=\"w-6 h-6 text-gray-400\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 4v16m8-8H4\"\n            />\n          </svg>\n        )}\n      </button>\n\n      {/* Botão de remover */}\n      {image?.src && (\n        <button\n          type=\"button\"\n          onClick={onRemove}\n          className={cn(\n            \"absolute -top-1 -right-1 w-5 h-5 rounded-full\",\n            \"bg-red-500 text-white\",\n            \"flex items-center justify-center\",\n            \"opacity-0 group-hover:opacity-100 transition-opacity\",\n            \"text-xs font-bold\"\n          )}\n        >\n          ×\n        </button>\n      )}\n\n      {/* Número do slot */}\n      <div className=\"absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[10px] text-center py-0.5\">\n        {index + 1}\n      </div>\n    </div>\n  );\n}\n\nexport function ImageGridInput({\n  preset: presetProp,\n  images: imagesProp,\n  gap: gapProp,\n  onPresetChange,\n  onImagesChange,\n  onGapChange,\n  label,\n  description,\n}: ImageGridInputProps) {\n  const preset = presetProp || \"four-equal\";\n  const images = imagesProp || [];\n  const gap = gapProp ?? 8;\n\n  const currentConfig = gridPresetMap[preset];\n  const maxImages = currentConfig.maxImages;\n\n  // Atualiza o preset\n  const handlePresetChange = (newPreset: ImageGridPreset) => {\n    const newConfig = gridPresetMap[newPreset];\n    // Truncar imagens se o novo preset suporta menos\n    if (images.length > newConfig.maxImages) {\n      onImagesChange(images.slice(0, newConfig.maxImages));\n    }\n    onPresetChange(newPreset);\n  };\n\n  // Atualiza uma imagem específica\n  const handleImageChange = (index: number, image: ImageGridItem) => {\n    const newImages = [...images];\n    // Preencher slots vazios até o índice\n    while (newImages.length <= index) {\n      newImages.push({ src: \"\", alt: \"\" });\n    }\n    newImages[index] = image;\n    onImagesChange(newImages);\n  };\n\n  // Remove uma imagem\n  const handleImageRemove = (index: number) => {\n    const newImages = [...images];\n    newImages[index] = { src: \"\", alt: \"\" };\n    onImagesChange(newImages);\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      {/* Label */}\n      {label && (\n        <label className=\"block text-xs font-medium text-gray-800 dark:text-gray-100\">\n          {label}\n          {description && (\n            <span className=\"text-gray-500 dark:text-gray-400 text-xs font-normal ml-1\">\n              {description}\n            </span>\n          )}\n        </label>\n      )}\n\n      {/* Seletor de Preset */}\n      <div className=\"space-y-1\">\n        <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n          Layout\n        </span>\n        <div className=\"flex flex-wrap gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg\">\n          {imageGridPresetIds.map((presetId) => (\n            <button\n              key={presetId}\n              type=\"button\"\n              onClick={() => handlePresetChange(presetId)}\n              className={cn(\n                \"rounded-md transition-all\",\n                preset === presetId\n                  ? \"bg-white dark:bg-gray-700 shadow-sm\"\n                  : \"hover:bg-white/50 dark:hover:bg-gray-700/50\"\n              )}\n            >\n              <PresetIcon preset={presetId} isActive={preset === presetId} />\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Slots de Imagens */}\n      <div className=\"space-y-1\">\n        <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n          Imagens ({images.filter(img => img?.src).length}/{maxImages})\n        </span>\n        <div className=\"flex flex-wrap gap-2\">\n          {Array.from({ length: maxImages }).map((_, index) => (\n            <ImageSlot\n              key={index}\n              index={index}\n              image={images[index]}\n              onChange={(img) => handleImageChange(index, img)}\n              onRemove={() => handleImageRemove(index)}\n            />\n          ))}\n        </div>\n      </div>\n\n      {/* Slider de Gap */}\n      <div className=\"space-y-1\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n            Espaçamento\n          </span>\n          <span className=\"text-xs text-gray-600 dark:text-gray-400\">\n            {gap}px\n          </span>\n        </div>\n        <input\n          type=\"range\"\n          value={gap}\n          onChange={(e) => onGapChange(Number(e.target.value))}\n          min={0}\n          max={24}\n          step={2}\n          className=\"w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["PresetIcon","preset","isActive","config","gridPresetMap","getPresetVisual","jsx","jsxs","cn","ImageSlot","index","image","onChange","onRemove","inputRef","useRef","e","file","reader","evt","dataUrl","ImageGridInput","presetProp","imagesProp","gapProp","onPresetChange","onImagesChange","onGapChange","label","description","images","gap","maxImages","handlePresetChange","newPreset","newConfig","handleImageChange","newImages","handleImageRemove","imageGridPresetIds","presetId","img","_"],"mappings":"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"}
+{"version":3,"file":"ImageGridInput.js","sources":["../../../../src/editor/PropertyEditor/inputs/ImageGridInput.tsx"],"sourcesContent":["/**\n * ImageGridInput\n * Componente de edição para grid de imagens com seletor de preset visual\n */\n\nimport { useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport {\n  type ImageGridItem,\n  type ImageGridPreset,\n  gridPresetMap,\n  imageGridPresetIds,\n} from \"../../../engine/shared/imageGrid\";\nimport type { UploadConfig } from \"../../LandingPageEditor\";\n\ninterface ImageGridInputProps {\n  /** Preset atual */\n  preset?: ImageGridPreset;\n  /** Array de imagens */\n  images?: ImageGridItem[];\n  /** Gap em pixels */\n  gap?: number;\n  /** Callback para atualizar preset */\n  onPresetChange: (preset: ImageGridPreset) => void;\n  /** Callback para atualizar imagens */\n  onImagesChange: (images: ImageGridItem[]) => void;\n  /** Callback para atualizar gap */\n  onGapChange: (gap: number) => void;\n  /** Label do componente */\n  label?: string;\n  /** Descrição */\n  description?: string;\n  /** Configuração de upload (tenantId, authToken, etc) */\n  uploadConfig?: UploadConfig;\n}\n\n/**\n * Ícones visuais dos presets usando divs estilizadas\n */\nfunction PresetIcon({ preset, isActive }: { preset: ImageGridPreset; isActive: boolean }) {\n  const config = gridPresetMap[preset];\n\n  // Usar uma mini-grid visual para representar cada preset\n  const getPresetVisual = () => {\n    switch (preset) {\n      case \"single\":\n        return (\n          <div className=\"w-full h-full bg-current rounded-sm\" />\n        );\n      case \"two-horizontal\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"two-vertical\":\n        return (\n          <div className=\"w-full h-full grid grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"three-left\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm row-span-2\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"three-right\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm row-span-2\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"three-top\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm col-span-2\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      case \"four-equal\":\n        return (\n          <div className=\"w-full h-full grid grid-cols-2 grid-rows-2 gap-0.5\">\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n            <div className=\"bg-current rounded-sm\" />\n          </div>\n        );\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"w-8 h-8 p-1\",\n        isActive ? \"text-blue-500\" : \"text-gray-400 dark:text-gray-500\"\n      )}\n      title={config.name}\n    >\n      {getPresetVisual()}\n    </div>\n  );\n}\n\n/**\n * Slot de imagem individual com preview, upload e slider de escala\n * Layout: row horizontal com preview à esquerda e slider à direita\n */\nfunction ImageSlot({\n  index,\n  image,\n  onChange,\n  onRemove,\n  onScaleChange,\n}: {\n  index: number;\n  image?: ImageGridItem;\n  onChange: (image: ImageGridItem) => void;\n  onRemove: () => void;\n  onScaleChange: (scale: number) => void;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n\n    // Validação básica\n    if (!file.type.startsWith(\"image/\")) {\n      alert(\"Apenas imagens são permitidas\");\n      return;\n    }\n\n    if (file.size > 10 * 1024 * 1024) {\n      alert(\"Arquivo muito grande. Máximo: 10MB\");\n      return;\n    }\n\n    // Usar Data URL para preview (deferUpload mode)\n    // Preservar scale existente ao trocar imagem\n    const reader = new FileReader();\n    reader.onload = (evt) => {\n      const dataUrl = evt.target?.result as string;\n      onChange({ src: dataUrl, alt: image?.alt || \"\", scale: image?.scale });\n    };\n    reader.readAsDataURL(file);\n  };\n\n  const handleClick = () => {\n    if (inputRef.current) {\n      inputRef.current.value = \"\"; // Reset para permitir selecionar o mesmo arquivo\n      inputRef.current.click();\n    }\n  };\n\n  const hasImage = !!image?.src;\n  const scale = image?.scale ?? 1;\n\n  return (\n    <div className=\"flex items-center gap-3 group\">\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        className=\"hidden\"\n      />\n\n      {/* Preview da imagem */}\n      <div className=\"relative flex-shrink-0\">\n        <button\n          type=\"button\"\n          onClick={handleClick}\n          className={cn(\n            \"w-12 h-12 rounded-lg overflow-hidden border-2 transition-all\",\n            \"flex items-center justify-center\",\n            \"bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700\",\n            hasImage\n              ? \"border-blue-400 dark:border-blue-500\"\n              : \"border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400\"\n          )}\n        >\n          {hasImage ? (\n            <img\n              src={image.src}\n              alt={image.alt || `Imagem ${index + 1}`}\n              className=\"w-full h-full object-cover\"\n            />\n          ) : (\n            <svg\n              className=\"w-5 h-5 text-gray-400\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              viewBox=\"0 0 24 24\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 4v16m8-8H4\"\n              />\n            </svg>\n          )}\n        </button>\n\n        {/* Botão de remover */}\n        {hasImage && (\n          <button\n            type=\"button\"\n            onClick={onRemove}\n            className={cn(\n              \"absolute -top-1 -right-1 w-4 h-4 rounded-full\",\n              \"bg-red-500 text-white\",\n              \"flex items-center justify-center\",\n              \"opacity-0 group-hover:opacity-100 transition-opacity\",\n              \"text-[10px] font-bold leading-none\"\n            )}\n          >\n            ×\n          </button>\n        )}\n\n        {/* Número do slot */}\n        <div className=\"absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[8px] text-center\">\n          {index + 1}\n        </div>\n      </div>\n\n      {/* Slider de escala — só aparece quando a imagem tem src */}\n      {hasImage && (\n        <div className=\"flex-1 flex items-center gap-2 min-w-0\">\n          <input\n            type=\"range\"\n            value={scale}\n            onChange={(e) => onScaleChange(Number(e.target.value))}\n            min={1}\n            max={3}\n            step={0.1}\n            className=\"flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer\"\n          />\n          <span className=\"text-[10px] text-gray-500 dark:text-gray-400 w-8 text-right tabular-nums flex-shrink-0\">\n            {Math.round(scale * 100)}%\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function ImageGridInput({\n  preset: presetProp,\n  images: imagesProp,\n  gap: gapProp,\n  onPresetChange,\n  onImagesChange,\n  onGapChange,\n  label,\n  description,\n}: ImageGridInputProps) {\n  const preset = presetProp || \"four-equal\";\n  const images = imagesProp || [];\n  const gap = gapProp ?? 8;\n\n  const currentConfig = gridPresetMap[preset];\n  const maxImages = currentConfig.maxImages;\n\n  // Atualiza o preset\n  const handlePresetChange = (newPreset: ImageGridPreset) => {\n    const newConfig = gridPresetMap[newPreset];\n    // Truncar imagens se o novo preset suporta menos\n    if (images.length > newConfig.maxImages) {\n      onImagesChange(images.slice(0, newConfig.maxImages));\n    }\n    onPresetChange(newPreset);\n  };\n\n  // Atualiza uma imagem específica\n  const handleImageChange = (index: number, image: ImageGridItem) => {\n    const newImages = [...images];\n    // Preencher slots vazios até o índice\n    while (newImages.length <= index) {\n      newImages.push({ src: \"\", alt: \"\" });\n    }\n    newImages[index] = image;\n    onImagesChange(newImages);\n  };\n\n  // Remove uma imagem\n  const handleImageRemove = (index: number) => {\n    const newImages = [...images];\n    newImages[index] = { src: \"\", alt: \"\" };\n    onImagesChange(newImages);\n  };\n\n  // Atualiza a escala de uma imagem específica\n  const handleScaleChange = (index: number, scale: number) => {\n    const newImages = [...images];\n    while (newImages.length <= index) {\n      newImages.push({ src: \"\", alt: \"\" });\n    }\n    newImages[index] = { ...newImages[index], scale };\n    onImagesChange(newImages);\n  };\n\n  return (\n    <div className=\"space-y-3\">\n      {/* Label */}\n      {label && (\n        <label className=\"block text-xs font-medium text-gray-800 dark:text-gray-100\">\n          {label}\n          {description && (\n            <span className=\"text-gray-500 dark:text-gray-400 text-xs font-normal ml-1\">\n              {description}\n            </span>\n          )}\n        </label>\n      )}\n\n      {/* Seletor de Preset */}\n      <div className=\"space-y-1\">\n        <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n          Layout\n        </span>\n        <div className=\"flex flex-wrap gap-1 p-1 bg-gray-100 dark:bg-gray-800 rounded-lg\">\n          {imageGridPresetIds.map((presetId) => (\n            <button\n              key={presetId}\n              type=\"button\"\n              onClick={() => handlePresetChange(presetId)}\n              className={cn(\n                \"rounded-md transition-all\",\n                preset === presetId\n                  ? \"bg-white dark:bg-gray-700 shadow-sm\"\n                  : \"hover:bg-white/50 dark:hover:bg-gray-700/50\"\n              )}\n            >\n              <PresetIcon preset={presetId} isActive={preset === presetId} />\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Slots de Imagens — lista vertical */}\n      <div className=\"space-y-1\">\n        <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n          Imagens ({images.filter(img => img?.src).length}/{maxImages})\n        </span>\n        <div className=\"flex flex-col gap-2\">\n          {Array.from({ length: maxImages }).map((_, index) => (\n            <ImageSlot\n              key={index}\n              index={index}\n              image={images[index]}\n              onChange={(img) => handleImageChange(index, img)}\n              onRemove={() => handleImageRemove(index)}\n              onScaleChange={(scale) => handleScaleChange(index, scale)}\n            />\n          ))}\n        </div>\n      </div>\n\n      {/* Slider de Gap */}\n      <div className=\"space-y-1\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-wide\">\n            Espaçamento\n          </span>\n          <span className=\"text-xs text-gray-600 dark:text-gray-400\">\n            {gap}px\n          </span>\n        </div>\n        <input\n          type=\"range\"\n          value={gap}\n          onChange={(e) => onGapChange(Number(e.target.value))}\n          min={0}\n          max={24}\n          step={2}\n          className=\"w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["PresetIcon","preset","isActive","config","gridPresetMap","getPresetVisual","jsx","jsxs","cn","ImageSlot","index","image","onChange","onRemove","onScaleChange","inputRef","useRef","handleFileChange","e","file","reader","evt","dataUrl","handleClick","hasImage","scale","ImageGridInput","presetProp","imagesProp","gapProp","onPresetChange","onImagesChange","onGapChange","label","description","images","gap","maxImages","handlePresetChange","newPreset","newConfig","handleImageChange","newImages","handleImageRemove","handleScaleChange","imageGridPresetIds","presetId","img","_"],"mappings":"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"}

package/dist/editor/PropertyEditor/inputs/ImageInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageInput.d.ts","sourceRoot":"","sources":["../../../../src/editor/PropertyEditor/inputs/ImageInput.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,YAAmB,EACnB,SAAa,EACb,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAmB,EACnB,WAAmB,EACnB,aAAa,GACd,EAAE,eAAe,2CAiMjB"}

package/dist/{components → editor/PropertyEditor}/inputs/ImageInput.js

@@ -1,24 +1,26 @@
-import { jsxs as w, jsx as t } from "react/jsx-runtime";
-import { useState as E } from "react";
-import { cn as N } from "../../utils/cn.js";
+import { jsxs as E, jsx as t } from "react/jsx-runtime";
+import { useState as N } from "react";
+import { cn as _ } from "../../../utils/cn.js";
+import { logger as f } from "../../../utils/logger.js";
+const S = { BASE_URL: "/", DEV: !1, MODE: "production", PROD: !0, SSR: !1 };
 function F({
   value: i,
   onChange: d,
-  label: f,
-  size: h,
-  showUrlInput: j = !0,
-  maxSizeMB: x = 5,
+  label: h,
+  size: x,
+  showUrlInput: R = !0,
+  maxSizeMB: b = 5,
   tenantId: c,
   schoolId: u,
   siteId: p,
-  authToken: g,
-  assetType: b = "image",
+  authToken: m,
+  assetType: y = "image",
   deferUpload: U = !1,
-  onPendingFile: y
+  onPendingFile: v
 }) {
-  const [n, v] = E(!1), [k, a] = E(null);
-  return /* @__PURE__ */ w("div", { className: "space-y-2 flex flex-col items-center", children: [
-    f && /* @__PURE__ */ t("label", { className: "block text-xs font-medium text-gray-800 dark:text-gray-100 text-center", children: f }),
+  const [n, k] = N(!1), [w, a] = N(null);
+  return /* @__PURE__ */ E("div", { className: "space-y-2 flex flex-col items-center", children: [
+    h && /* @__PURE__ */ t("label", { className: "block text-xs font-medium text-gray-800 dark:text-gray-100 text-center", children: h }),
     /* @__PURE__ */ t(
       "input",
       {
@@ -28,12 +30,12 @@ function F({
         type: "file",
         accept: "image/*",
         onChange: async (r) => {
-          console.log("[ImageInput] Upload config:", { tenantId: c, schoolId: u, siteId: p, hasAuthToken: !!g, assetType: b });
+          f.debug("[ImageInput] Upload config:", { tenantId: c, schoolId: u, siteId: p, hasAuthToken: !!m, assetType: y });
           const o = r.target.files?.[0];
           if (!o) return;
-          const A = x * 1024 * 1024;
-          if (o.size > A) {
-            a(`Arquivo muito grande. Máximo: ${x}MB`);
+          const j = b * 1024 * 1024;
+          if (o.size > j) {
+            a(`Arquivo muito grande. Máximo: ${b}MB`);
             return;
           }
           if (!o.type.startsWith("image/") && !o.type.startsWith("video/")) {
@@ -43,18 +45,18 @@ function F({
           if (a(null), U) {
             try {
               const e = new FileReader();
-              e.onload = (m) => {
-                const s = m.target?.result;
-                d(s), y && y(o);
+              e.onload = (g) => {
+                const s = g.target?.result;
+                d(s), v && v(o);
               }, e.onerror = () => {
                 a("Erro ao ler o arquivo");
               }, e.readAsDataURL(o);
             } catch (e) {
-              console.error("Erro ao criar preview:", e), a(e instanceof Error ? e.message : "Erro ao processar imagem");
+              f.error("Erro ao criar preview:", e), a(e instanceof Error ? e.message : "Erro ao processar imagem");
             }
             return;
           }
-          if (!g) {
+          if (!m) {
             a("Autenticação necessária para upload");
             return;
           }
@@ -62,29 +64,29 @@ function F({
             a("Contexto do tenant é necessário");
             return;
           }
-          v(!0);
+          k(!0);
           try {
             const e = new FormData();
             e.append("file", o);
-            const m = "http://localhost:3001", s = new URLSearchParams({ tenantId: c, assetType: b });
+            const g = "http://localhost:3001", s = new URLSearchParams({ tenantId: c, assetType: y });
             u && s.append("schoolId", u), p && s.append("siteId", p);
-            const l = await fetch(`${m}/api/site-assets/upload?${s}`, {
+            const l = await fetch(`${g}/api/site-assets/upload?${s}`, {
               method: "POST",
               headers: {
-                Authorization: `Bearer ${g}`
+                Authorization: `Bearer ${m}`
               },
               body: e
             });
             if (!l.ok) {
-              const R = await l.json().catch(() => ({}));
-              throw l.status === 401 ? new Error("Sessão expirada. Faça login novamente.") : new Error(R.message || "Upload falhou");
+              const D = await l.json().catch(() => ({}));
+              throw l.status === 401 ? new Error("Sessão expirada. Faça login novamente.") : new Error(D.message || "Upload falhou");
             }
-            const C = await l.json();
-            d(C.url), a(null);
+            const A = await l.json();
+            d(A.url), a(null);
           } catch (e) {
-            console.error("Erro no upload:", e), a(e instanceof Error ? e.message : "Erro ao fazer upload da imagem");
+            f.error("Erro no upload:", e), a(e instanceof Error ? e.message : "Erro ao fazer upload da imagem");
           } finally {
-            v(!1);
+            k(!1);
           }
         },
         disabled: n,
@@ -101,7 +103,7 @@ function F({
           r && (r.value = "", r.click());
         },
         disabled: n,
-        className: N(
+        className: _(
           "rounded-lg overflow-hidden border-2 transition-all duration-200",
           "flex items-center justify-center",
           "bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700",
@@ -110,8 +112,8 @@ function F({
           !n && "cursor-pointer"
         ),
         style: {
-          height: h?.height || 120,
-          width: h?.width || 200
+          height: x?.height || 120,
+          width: x?.width || 200
         },
         children: i ? /* @__PURE__ */ t(
           "img",
@@ -123,7 +125,7 @@ function F({
               r.currentTarget.style.display = "none";
             }
           }
-        ) : /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2 p-4 text-center", children: [
+        ) : /* @__PURE__ */ E("div", { className: "flex flex-col items-center justify-center gap-2 p-4 text-center", children: [
           /* @__PURE__ */ t("svg", { className: "w-8 h-8 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }),
           /* @__PURE__ */ t("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: n ? "Enviando..." : "Clique para selecionar" })
         ] })
@@ -138,14 +140,14 @@ function F({
         children: "Remover imagem"
       }
     ),
-    j && /* @__PURE__ */ t(
+    R && /* @__PURE__ */ t(
       "input",
       {
         type: "text",
         placeholder: "URL da imagem",
         value: i || "",
         onChange: (r) => d(r.target.value || void 0),
-        className: N(
+        className: _(
           "flex h-11 w-full rounded-lg border-2 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm transition-all duration-200",
           "placeholder:text-gray-400 dark:placeholder:text-gray-500",
           "focus:outline-none",
@@ -154,7 +156,7 @@ function F({
         )
       }
     ),
-    k && /* @__PURE__ */ t("div", { className: "text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded border border-red-200 dark:border-red-800", children: k })
+    w && /* @__PURE__ */ t("div", { className: "text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded border border-red-200 dark:border-red-800", children: w })
   ] });
 }
 export {

package/dist/editor/PropertyEditor/inputs/ImageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageInput.js","sources":["../../../../src/editor/PropertyEditor/inputs/ImageInput.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { cn } from '../../../utils/cn'\nimport { logger } from '../../../utils/logger'\n\ninterface ImageInputProps {\n  value?: string\n  onChange: (v?: string) => void\n  label?: string\n  size?: { width: number; height: number }\n  showUrlInput?: boolean\n  maxSizeMB?: number\n  tenantId?: string\n  schoolId?: string\n  siteId?: string\n  authToken?: string\n  assetType?: 'image' | 'video' | 'icon' | 'logo'\n  deferUpload?: boolean\n  onPendingFile?: (file: File | null) => void\n}\n\nexport function ImageInput({\n  value,\n  onChange,\n  label,\n  size,\n  showUrlInput = true,\n  maxSizeMB = 5,\n  tenantId,\n  schoolId,\n  siteId,\n  authToken,\n  assetType = 'image',\n  deferUpload = false,\n  onPendingFile,\n}: ImageInputProps) {\n  const [uploading, setUploading] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n\n  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    logger.debug('[ImageInput] Upload config:', { tenantId, schoolId, siteId, hasAuthToken: !!authToken, assetType })\n    const file = e.target.files?.[0]\n    if (!file) return\n\n    const maxBytes = maxSizeMB * 1024 * 1024\n    if (file.size > maxBytes) {\n      setError(`Arquivo muito grande. Máximo: ${maxSizeMB}MB`)\n      return\n    }\n\n    if (!file.type.startsWith('image/') && !file.type.startsWith('video/')) {\n      setError('Apenas imagens e vídeos são permitidos')\n      return\n    }\n\n    setError(null)\n\n    if (deferUpload) {\n      try {\n        const reader = new FileReader()\n        reader.onload = (e) => {\n          const dataUrl = e.target?.result as string\n          onChange(dataUrl)\n          if (onPendingFile) {\n            onPendingFile(file)\n          }\n        }\n        reader.onerror = () => {\n          setError('Erro ao ler o arquivo')\n        }\n        reader.readAsDataURL(file)\n      } catch (err) {\n        logger.error(\"Erro ao criar preview:\", err)\n        setError(err instanceof Error ? err.message : \"Erro ao processar imagem\")\n      }\n      return\n    }\n\n    if (!authToken) {\n      setError('Autenticação necessária para upload')\n      return\n    }\n\n    if (!tenantId) {\n      setError('Contexto do tenant é necessário')\n      return\n    }\n\n    setUploading(true)\n\n    try {\n      const formData = new FormData()\n      formData.append('file', file)\n\n      const apiUrl = (import.meta as any).env\n        ? ((import.meta as any).env as Record<string, string>).VITE_API_URL || 'http://localhost:3001'\n        : 'http://localhost:3001'\n\n      const params = new URLSearchParams({ tenantId, assetType })\n      if (schoolId) params.append('schoolId', schoolId)\n      if (siteId) params.append('siteId', siteId)\n\n      const res = await fetch(`${apiUrl}/api/site-assets/upload?${params}`, {\n        method: 'POST',\n        headers: {\n          'Authorization': `Bearer ${authToken}`,\n        },\n        body: formData,\n      })\n\n      if (!res.ok) {\n        const errorData = await res.json().catch(() => ({}))\n        if (res.status === 401) {\n          throw new Error('Sessão expirada. Faça login novamente.')\n        }\n        throw new Error((errorData as Record<string, string>).message || 'Upload falhou')\n      }\n\n      const data = await res.json()\n      onChange((data as Record<string, string>).url)\n      setError(null)\n    } catch (err) {\n      logger.error(\"Erro no upload:\", err)\n      setError(err instanceof Error ? err.message : \"Erro ao fazer upload da imagem\")\n    } finally {\n      setUploading(false)\n    }\n  }\n\n  return (\n    <div className=\"space-y-2 flex flex-col items-center\">\n      {label && (\n        <label className=\"block text-xs font-medium text-gray-800 dark:text-gray-100 text-center\">\n          {label}\n        </label>\n      )}\n\n      <input\n        ref={(el) => {\n          if (el) (window as any).__imageInputRef = el;\n        }}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleFileChange}\n        disabled={uploading}\n        className=\"hidden\"\n        id={`image-input-${Math.random()}`}\n      />\n\n      <button\n        type=\"button\"\n        onClick={() => {\n          const input = document.querySelector('input[type=\"file\"][accept=\"image/*\"]') as HTMLInputElement;\n          if (input) {\n            input.value = '';\n            input.click();\n          }\n        }}\n        disabled={uploading}\n        className={cn(\n          'rounded-lg overflow-hidden border-2 transition-all duration-200',\n          'flex items-center justify-center',\n          'bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700',\n          value\n            ? 'border-blue-400 dark:border-blue-500 hover:border-blue-500'\n            : 'border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-400',\n          uploading && 'opacity-50 cursor-not-allowed',\n          !uploading && 'cursor-pointer'\n        )}\n        style={{\n          height: size?.height || 120,\n          width: size?.width || 200,\n        }}\n      >\n        {value ? (\n          <img\n            src={value}\n            alt=\"preview\"\n            className=\"w-full h-full object-contain\"\n            onError={(e) => {\n              e.currentTarget.style.display = 'none';\n            }}\n          />\n        ) : (\n          <div className=\"flex flex-col items-center justify-center gap-2 p-4 text-center\">\n            <svg className=\"w-8 h-8 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 4v16m8-8H4\" />\n            </svg>\n            <span className=\"text-xs text-gray-500 dark:text-gray-400\">\n              {uploading ? 'Enviando...' : 'Clique para selecionar'}\n            </span>\n          </div>\n        )}\n      </button>\n\n      {value && !uploading && (\n        <button\n          onClick={() => onChange(undefined)}\n          type=\"button\"\n          className=\"text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-left transition-colors font-medium\"\n        >\n          Remover imagem\n        </button>\n      )}\n\n      {showUrlInput && (\n        <input\n          type=\"text\"\n          placeholder=\"URL da imagem\"\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value || undefined)}\n          className={cn(\n            'flex h-11 w-full rounded-lg border-2 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm transition-all duration-200',\n            'placeholder:text-gray-400 dark:placeholder:text-gray-500',\n            'focus:outline-none',\n            'border-gray-300 dark:border-gray-600 hover:border-blue-400/50 focus:border-blue-500',\n            'text-gray-900 dark:text-gray-100'\n          )}\n        />\n      )}\n\n      {error && (\n        <div className=\"text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 p-2 rounded border border-red-200 dark:border-red-800\">\n          {error}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["ImageInput","value","onChange","label","size","showUrlInput","maxSizeMB","tenantId","schoolId","siteId","authToken","assetType","deferUpload","onPendingFile","uploading","setUploading","useState","error","setError","jsxs","jsx","el","e","logger","file","maxBytes","reader","dataUrl","err","formData","apiUrl","params","res","errorData","data","input","cn"],"mappings":"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"}

package/dist/editor/PropertyEditor/inputs/TypographyInput.js

@@ -1,51 +1,48 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as b, useRef as C, useEffect as S } from "react";
-import { HexColorPicker as x } from "../../../node_modules/react-colorful/dist/index.js";
+import { useState as m, useRef as S, useEffect as z, useCallback as y } from "react";
+import { HexColorPicker as k } from "react-colorful";
+import { ChevronUp as I, ChevronDown as E, Minus as W, Plus as P } from "lucide-react";
 import { cn as s } from "../../../utils/cn.js";
-import { fontWeightLabels as z, textEffectLabels as I } from "../../../engine/shared/typography/types.js";
-import { generateTypographySummary as E } from "../../../engine/shared/typography/cssGenerator.js";
-import W from "../../../node_modules/lucide-react/dist/esm/icons/chevron-up.js";
-import P from "../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-import M from "../../../node_modules/lucide-react/dist/esm/icons/minus.js";
-import j from "../../../node_modules/lucide-react/dist/esm/icons/plus.js";
-const L = ["light", "normal", "medium", "semibold", "bold"], O = ["none", "shadow", "glow", "outline", "gradient"];
+import { generateTypographySummary as M } from "../../../engine/shared/typography/cssGenerator.js";
+import { fontWeightLabels as j, textEffectLabels as L } from "../../../engine/shared/typography/types.js";
+const O = ["light", "normal", "medium", "semibold", "bold"], T = ["none", "shadow", "glow", "outline", "gradient"];
 function B({
   value: l,
-  onChange: p,
-  label: k,
-  defaultFontSize: m = 16,
-  defaultFontWeight: v = "normal"
+  onChange: f,
+  label: v,
+  defaultFontSize: i = 16,
+  defaultFontWeight: N = "normal"
 }) {
-  const [d, f] = b(!1), [y, i] = b(!1), [u, c] = b(!1), g = C(null), t = {
-    fontSize: l?.fontSize ?? m,
-    fontWeight: l?.fontWeight ?? v,
+  const [d, u] = m(!1), [x, c] = m(!1), [h, g] = m(!1), b = S(null), t = {
+    fontSize: l?.fontSize ?? i,
+    fontWeight: l?.fontWeight ?? N,
     color: l?.color ?? "",
     effect: l?.effect ?? "none",
     effectColor: l?.effectColor ?? "#000000",
     effectIntensity: l?.effectIntensity ?? 50
   };
-  S(() => {
+  z(() => {
     function r(n) {
-      g.current && !g.current.contains(n.target) && (f(!1), i(!1), c(!1));
+      b.current && !b.current.contains(n.target) && (u(!1), c(!1), g(!1));
     }
     return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
   }, []);
-  const o = (r) => {
-    p({ ...t, ...r });
-  }, h = (r) => {
-    const n = Math.max(8, Math.min(200, (t.fontSize || m) + r));
+  const o = y((r) => {
+    f({ ...t, ...r });
+  }, [t, f]), p = y((r) => {
+    const n = Math.max(8, Math.min(200, (t.fontSize || i) + r));
     o({ fontSize: n });
-  }, N = (r) => {
+  }, [t.fontSize, i, o]), w = y((r) => {
     const n = parseInt(r.target.value, 10);
     !isNaN(n) && n >= 8 && n <= 200 && o({ fontSize: n });
-  }, w = E(t);
-  return /* @__PURE__ */ a("div", { ref: g, className: "relative", children: [
-    /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: k }) }),
+  }, [o]), C = M(t);
+  return /* @__PURE__ */ a("div", { ref: b, className: "relative", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: v }) }),
     /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        onClick: () => f(!d),
+        onClick: () => u(!d),
         className: s(
           "w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-all cursor-pointer",
           "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600",
@@ -61,10 +58,10 @@ function B({
                 fontSize: `${Math.min(t.fontSize || 16, 18)}px`,
                 fontWeight: t.fontWeight === "bold" ? 700 : t.fontWeight === "semibold" ? 600 : 400
               },
-              children: w
+              children: C
             }
           ),
-          d ? /* @__PURE__ */ e(W, { className: "w-4 h-4 text-gray-400" }) : /* @__PURE__ */ e(P, { className: "w-4 h-4 text-gray-400" })
+          d ? /* @__PURE__ */ e(I, { className: "w-4 h-4 text-gray-400" }) : /* @__PURE__ */ e(E, { className: "w-4 h-4 text-gray-400" })
         ]
       }
     ),
@@ -76,9 +73,9 @@ function B({
             "button",
             {
               type: "button",
-              onClick: () => h(-2),
+              onClick: () => p(-2),
               className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer",
-              children: /* @__PURE__ */ e(M, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(W, { className: "w-4 h-4" })
             }
           ),
           /* @__PURE__ */ e(
@@ -86,7 +83,7 @@ function B({
             {
               type: "number",
               value: t.fontSize,
-              onChange: N,
+              onChange: w,
               min: 8,
               max: 200,
               className: s(
@@ -102,9 +99,9 @@ function B({
             "button",
             {
               type: "button",
-              onClick: () => h(2),
+              onClick: () => p(2),
               className: "p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer",
-              children: /* @__PURE__ */ e(j, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(P, { className: "w-4 h-4" })
             }
           ),
           /* @__PURE__ */ e("span", { className: "text-xs text-gray-400 ml-1", children: "px" })
@@ -112,7 +109,7 @@ function B({
       ] }),
       /* @__PURE__ */ a("div", { children: [
         /* @__PURE__ */ e("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2", children: "Peso" }),
-        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: L.map((r) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: O.map((r) => /* @__PURE__ */ e(
           "button",
           {
             type: "button",
@@ -121,7 +118,7 @@ function B({
               "px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer",
               t.fontWeight === r ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
             ),
-            children: z[r]
+            children: j[r]
           },
           r
         )) })
@@ -133,7 +130,7 @@ function B({
           {
             type: "button",
             onClick: () => {
-              i(!y), c(!1);
+              c(!x), g(!1);
             },
             className: s(
               "w-full flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer",
@@ -152,9 +149,9 @@ function B({
             ]
           }
         ),
-        y && /* @__PURE__ */ a("div", { className: "absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600", children: [
+        x && /* @__PURE__ */ a("div", { className: "absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600", children: [
           /* @__PURE__ */ e(
-            x,
+            k,
             {
               color: t.color || "#000000",
               onChange: (r) => o({ color: r })
@@ -173,7 +170,7 @@ function B({
       ] }),
       /* @__PURE__ */ a("div", { children: [
         /* @__PURE__ */ e("label", { className: "block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2", children: "Efeito" }),
-        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: O.map((r) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: T.map((r) => /* @__PURE__ */ e(
           "button",
           {
             type: "button",
@@ -182,7 +179,7 @@ function B({
               "px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer",
               t.effect === r ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
             ),
-            children: I[r]
+            children: L[r]
           },
           r
         )) })
@@ -195,7 +192,7 @@ function B({
             {
               type: "button",
               onClick: () => {
-                c(!u), i(!1);
+                g(!h), c(!1);
               },
               className: s(
                 "w-full flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer",
@@ -214,8 +211,8 @@ function B({
               ]
             }
           ),
-          u && /* @__PURE__ */ e("div", { className: "absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600", children: /* @__PURE__ */ e(
-            x,
+          h && /* @__PURE__ */ e("div", { className: "absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600", children: /* @__PURE__ */ e(
+            k,
             {
               color: t.effectColor || "#000000",
               onChange: (r) => o({ effectColor: r })

package/dist/editor/PropertyEditor/inputs/TypographyInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TypographyInput.js","sources":["../../../../src/editor/PropertyEditor/inputs/TypographyInput.tsx"],"sourcesContent":["/**\n * TypographyInput - Editor de tipografia composto\n * Permite customizar: tamanho, peso, cor e efeitos de texto\n */\n\nimport { useState, useRef, useEffect } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-react';\nimport { cn } from '../../../utils/cn';\nimport {\n  TypographyConfig,\n  FontWeight,\n  TextEffect,\n  fontWeightLabels,\n  textEffectLabels,\n  generateTypographySummary,\n} from '../../../engine/shared/typography';\n\ninterface TypographyInputProps {\n  value: TypographyConfig | undefined;\n  onChange: (value: TypographyConfig) => void;\n  label: string;\n  defaultFontSize?: number;\n  defaultFontWeight?: FontWeight;\n}\n\nconst fontWeights: FontWeight[] = ['light', 'normal', 'medium', 'semibold', 'bold'];\nconst textEffects: TextEffect[] = ['none', 'shadow', 'glow', 'outline', 'gradient'];\n\nexport function TypographyInput({\n  value,\n  onChange,\n  label,\n  defaultFontSize = 16,\n  defaultFontWeight = 'normal',\n}: TypographyInputProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [showColorPicker, setShowColorPicker] = useState(false);\n  const [showEffectColorPicker, setShowEffectColorPicker] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const config: TypographyConfig = {\n    fontSize: value?.fontSize ?? defaultFontSize,\n    fontWeight: value?.fontWeight ?? defaultFontWeight,\n    color: value?.color ?? '',\n    effect: value?.effect ?? 'none',\n    effectColor: value?.effectColor ?? '#000000',\n    effectIntensity: value?.effectIntensity ?? 50,\n  };\n\n  // Fecha ao clicar fora\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n        setShowColorPicker(false);\n        setShowEffectColorPicker(false);\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  const updateConfig = (updates: Partial<TypographyConfig>) => {\n    onChange({ ...config, ...updates });\n  };\n\n  const handleFontSizeChange = (delta: number) => {\n    const newSize = Math.max(8, Math.min(200, (config.fontSize || defaultFontSize) + delta));\n    updateConfig({ fontSize: newSize });\n  };\n\n  const handleFontSizeInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = parseInt(e.target.value, 10);\n    if (!isNaN(val) && val >= 8 && val <= 200) {\n      updateConfig({ fontSize: val });\n    }\n  };\n\n  const summary = generateTypographySummary(config);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      {/* Label e botão de toggle */}\n      <div className=\"flex items-center justify-between mb-1\">\n        <span className=\"text-xs font-medium text-gray-600 dark:text-gray-400\">\n          {label}\n        </span>\n      </div>\n\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        className={cn(\n          \"w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-all cursor-pointer\",\n          \"bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600\",\n          \"hover:border-blue-400 dark:hover:border-blue-500\",\n          isOpen && \"border-blue-500 ring-1 ring-blue-500\"\n        )}\n      >\n        <span\n          className=\"text-sm font-medium text-gray-700 dark:text-gray-200\"\n          style={{\n            fontSize: `${Math.min(config.fontSize || 16, 18)}px`,\n            fontWeight: config.fontWeight === 'bold' ? 700 : config.fontWeight === 'semibold' ? 600 : 400,\n          }}\n        >\n          {summary}\n        </span>\n        {isOpen ? (\n          <ChevronUp className=\"w-4 h-4 text-gray-400\" />\n        ) : (\n          <ChevronDown className=\"w-4 h-4 text-gray-400\" />\n        )}\n      </button>\n\n      {/* Popover */}\n      {isOpen && (\n        <div className=\"absolute z-50 mt-2 w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 p-4 space-y-4 max-h-[400px] overflow-y-auto\">\n          {/* Tamanho da fonte - estilo RichText */}\n          <div>\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Tamanho\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => handleFontSizeChange(-2)}\n                className=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer\"\n              >\n                <Minus className=\"w-4 h-4\" />\n              </button>\n              <input\n                type=\"number\"\n                value={config.fontSize}\n                onChange={handleFontSizeInput}\n                min={8}\n                max={200}\n                className={cn(\n                  \"w-20 text-center py-2 rounded-lg border\",\n                  \"bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600\",\n                  \"text-lg font-semibold text-gray-800 dark:text-gray-100\",\n                  \"focus:outline-none focus:ring-2 focus:ring-blue-500\"\n                )}\n                style={{ fontSize: `${Math.min(config.fontSize || 16, 24)}px` }}\n              />\n              <button\n                type=\"button\"\n                onClick={() => handleFontSizeChange(2)}\n                className=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer\"\n              >\n                <Plus className=\"w-4 h-4\" />\n              </button>\n              <span className=\"text-xs text-gray-400 ml-1\">px</span>\n            </div>\n          </div>\n\n          {/* Peso da fonte */}\n          <div>\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Peso\n            </label>\n            <div className=\"flex flex-wrap gap-1\">\n              {fontWeights.map((weight) => (\n                <button\n                  key={weight}\n                  type=\"button\"\n                  onClick={() => updateConfig({ fontWeight: weight })}\n                  className={cn(\n                    \"px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer\",\n                    config.fontWeight === weight\n                      ? \"bg-blue-500 text-white\"\n                      : \"bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600\"\n                  )}\n                >\n                  {fontWeightLabels[weight]}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Cor do texto */}\n          <div className=\"relative\">\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Cor\n            </label>\n            <button\n              type=\"button\"\n              onClick={() => {\n                setShowColorPicker(!showColorPicker);\n                setShowEffectColorPicker(false);\n              }}\n              className={cn(\n                \"w-full flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer\",\n                \"bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600\",\n                \"hover:border-blue-400 transition-colors\"\n              )}\n            >\n              <div\n                className=\"w-6 h-6 rounded border border-gray-300 dark:border-gray-500\"\n                style={{ backgroundColor: config.color || 'transparent' }}\n              />\n              <span className=\"text-sm text-gray-600 dark:text-gray-300\">\n                {config.color || 'Padrão do tema'}\n              </span>\n            </button>\n            {showColorPicker && (\n              <div className=\"absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600\">\n                <HexColorPicker\n                  color={config.color || '#000000'}\n                  onChange={(color) => updateConfig({ color })}\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => updateConfig({ color: undefined })}\n                  className=\"w-full mt-2 px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer\"\n                >\n                  Usar cor do tema\n                </button>\n              </div>\n            )}\n          </div>\n\n          {/* Efeito */}\n          <div>\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Efeito\n            </label>\n            <div className=\"flex flex-wrap gap-1\">\n              {textEffects.map((effect) => (\n                <button\n                  key={effect}\n                  type=\"button\"\n                  onClick={() => updateConfig({ effect })}\n                  className={cn(\n                    \"px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer\",\n                    config.effect === effect\n                      ? \"bg-blue-500 text-white\"\n                      : \"bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600\"\n                  )}\n                >\n                  {textEffectLabels[effect]}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Configurações do efeito (se não for 'none') */}\n          {config.effect && config.effect !== 'none' && (\n            <div className=\"space-y-3 pt-2 border-t border-gray-200 dark:border-gray-600\">\n              {/* Cor do efeito */}\n              <div className=\"relative\">\n                <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n                  {config.effect === 'gradient' ? 'Segunda Cor' : 'Cor do Efeito'}\n                </label>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowEffectColorPicker(!showEffectColorPicker);\n                    setShowColorPicker(false);\n                  }}\n                  className={cn(\n                    \"w-full flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer\",\n                    \"bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600\",\n                    \"hover:border-blue-400 transition-colors\"\n                  )}\n                >\n                  <div\n                    className=\"w-6 h-6 rounded border border-gray-300 dark:border-gray-500\"\n                    style={{ backgroundColor: config.effectColor || '#000000' }}\n                  />\n                  <span className=\"text-sm text-gray-600 dark:text-gray-300\">\n                    {config.effectColor || '#000000'}\n                  </span>\n                </button>\n                {showEffectColorPicker && (\n                  <div className=\"absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600\">\n                    <HexColorPicker\n                      color={config.effectColor || '#000000'}\n                      onChange={(color) => updateConfig({ effectColor: color })}\n                    />\n                  </div>\n                )}\n              </div>\n\n              {/* Intensidade do efeito */}\n              <div>\n                <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n                  Intensidade: {config.effectIntensity}%\n                </label>\n                <input\n                  type=\"range\"\n                  min={0}\n                  max={100}\n                  step={10}\n                  value={config.effectIntensity}\n                  onChange={(e) => updateConfig({ effectIntensity: parseInt(e.target.value, 10) })}\n                  className=\"w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n                />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["fontWeights","textEffects","TypographyInput","value","onChange","label","defaultFontSize","defaultFontWeight","isOpen","setIsOpen","useState","showColorPicker","setShowColorPicker","showEffectColorPicker","setShowEffectColorPicker","containerRef","useRef","config","useEffect","handleClickOutside","event","updateConfig","updates","handleFontSizeChange","delta","newSize","handleFontSizeInput","e","val","summary","generateTypographySummary","jsxs","jsx","cn","ChevronUp","ChevronDown","Minus","Plus","weight","HexColorPicker","color","effect"],"mappings":"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"}
+{"version":3,"file":"TypographyInput.js","sources":["../../../../src/editor/PropertyEditor/inputs/TypographyInput.tsx"],"sourcesContent":["/**\n * TypographyInput - Editor de tipografia composto\n * Permite customizar: tamanho, peso, cor e efeitos de texto\n */\n\nimport { useState, useRef, useEffect, useCallback } from 'react';\nimport { HexColorPicker } from 'react-colorful';\nimport { ChevronDown, ChevronUp, Minus, Plus } from 'lucide-react';\nimport { cn } from '../../../utils/cn';\nimport {\n  TypographyConfig,\n  FontWeight,\n  TextEffect,\n  fontWeightLabels,\n  textEffectLabels,\n  generateTypographySummary,\n} from '../../../engine/shared/typography';\n\ninterface TypographyInputProps {\n  value: TypographyConfig | undefined;\n  onChange: (value: TypographyConfig) => void;\n  label: string;\n  defaultFontSize?: number;\n  defaultFontWeight?: FontWeight;\n}\n\nconst fontWeights: FontWeight[] = ['light', 'normal', 'medium', 'semibold', 'bold'];\nconst textEffects: TextEffect[] = ['none', 'shadow', 'glow', 'outline', 'gradient'];\n\nexport function TypographyInput({\n  value,\n  onChange,\n  label,\n  defaultFontSize = 16,\n  defaultFontWeight = 'normal',\n}: TypographyInputProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [showColorPicker, setShowColorPicker] = useState(false);\n  const [showEffectColorPicker, setShowEffectColorPicker] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const config: TypographyConfig = {\n    fontSize: value?.fontSize ?? defaultFontSize,\n    fontWeight: value?.fontWeight ?? defaultFontWeight,\n    color: value?.color ?? '',\n    effect: value?.effect ?? 'none',\n    effectColor: value?.effectColor ?? '#000000',\n    effectIntensity: value?.effectIntensity ?? 50,\n  };\n\n  // Fecha ao clicar fora\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n        setShowColorPicker(false);\n        setShowEffectColorPicker(false);\n      }\n    }\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  const updateConfig = useCallback((updates: Partial<TypographyConfig>) => {\n    onChange({ ...config, ...updates });\n  }, [config, onChange]);\n\n  const handleFontSizeChange = useCallback((delta: number) => {\n    const newSize = Math.max(8, Math.min(200, (config.fontSize || defaultFontSize) + delta));\n    updateConfig({ fontSize: newSize });\n  }, [config.fontSize, defaultFontSize, updateConfig]);\n\n  const handleFontSizeInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = parseInt(e.target.value, 10);\n    if (!isNaN(val) && val >= 8 && val <= 200) {\n      updateConfig({ fontSize: val });\n    }\n  }, [updateConfig]);\n\n  const summary = generateTypographySummary(config);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      {/* Label e botão de toggle */}\n      <div className=\"flex items-center justify-between mb-1\">\n        <span className=\"text-xs font-medium text-gray-600 dark:text-gray-400\">\n          {label}\n        </span>\n      </div>\n\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        className={cn(\n          \"w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-all cursor-pointer\",\n          \"bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-600\",\n          \"hover:border-blue-400 dark:hover:border-blue-500\",\n          isOpen && \"border-blue-500 ring-1 ring-blue-500\"\n        )}\n      >\n        <span\n          className=\"text-sm font-medium text-gray-700 dark:text-gray-200\"\n          style={{\n            fontSize: `${Math.min(config.fontSize || 16, 18)}px`,\n            fontWeight: config.fontWeight === 'bold' ? 700 : config.fontWeight === 'semibold' ? 600 : 400,\n          }}\n        >\n          {summary}\n        </span>\n        {isOpen ? (\n          <ChevronUp className=\"w-4 h-4 text-gray-400\" />\n        ) : (\n          <ChevronDown className=\"w-4 h-4 text-gray-400\" />\n        )}\n      </button>\n\n      {/* Popover */}\n      {isOpen && (\n        <div className=\"absolute z-50 mt-2 w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 p-4 space-y-4 max-h-[400px] overflow-y-auto\">\n          {/* Tamanho da fonte - estilo RichText */}\n          <div>\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Tamanho\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => handleFontSizeChange(-2)}\n                className=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer\"\n              >\n                <Minus className=\"w-4 h-4\" />\n              </button>\n              <input\n                type=\"number\"\n                value={config.fontSize}\n                onChange={handleFontSizeInput}\n                min={8}\n                max={200}\n                className={cn(\n                  \"w-20 text-center py-2 rounded-lg border\",\n                  \"bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600\",\n                  \"text-lg font-semibold text-gray-800 dark:text-gray-100\",\n                  \"focus:outline-none focus:ring-2 focus:ring-blue-500\"\n                )}\n                style={{ fontSize: `${Math.min(config.fontSize || 16, 24)}px` }}\n              />\n              <button\n                type=\"button\"\n                onClick={() => handleFontSizeChange(2)}\n                className=\"p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer\"\n              >\n                <Plus className=\"w-4 h-4\" />\n              </button>\n              <span className=\"text-xs text-gray-400 ml-1\">px</span>\n            </div>\n          </div>\n\n          {/* Peso da fonte */}\n          <div>\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Peso\n            </label>\n            <div className=\"flex flex-wrap gap-1\">\n              {fontWeights.map((weight) => (\n                <button\n                  key={weight}\n                  type=\"button\"\n                  onClick={() => updateConfig({ fontWeight: weight })}\n                  className={cn(\n                    \"px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer\",\n                    config.fontWeight === weight\n                      ? \"bg-blue-500 text-white\"\n                      : \"bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600\"\n                  )}\n                >\n                  {fontWeightLabels[weight]}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Cor do texto */}\n          <div className=\"relative\">\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Cor\n            </label>\n            <button\n              type=\"button\"\n              onClick={() => {\n                setShowColorPicker(!showColorPicker);\n                setShowEffectColorPicker(false);\n              }}\n              className={cn(\n                \"w-full flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer\",\n                \"bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600\",\n                \"hover:border-blue-400 transition-colors\"\n              )}\n            >\n              <div\n                className=\"w-6 h-6 rounded border border-gray-300 dark:border-gray-500\"\n                style={{ backgroundColor: config.color || 'transparent' }}\n              />\n              <span className=\"text-sm text-gray-600 dark:text-gray-300\">\n                {config.color || 'Padrão do tema'}\n              </span>\n            </button>\n            {showColorPicker && (\n              <div className=\"absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600\">\n                <HexColorPicker\n                  color={config.color || '#000000'}\n                  onChange={(color) => updateConfig({ color })}\n                />\n                <button\n                  type=\"button\"\n                  onClick={() => updateConfig({ color: undefined })}\n                  className=\"w-full mt-2 px-3 py-1.5 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer\"\n                >\n                  Usar cor do tema\n                </button>\n              </div>\n            )}\n          </div>\n\n          {/* Efeito */}\n          <div>\n            <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n              Efeito\n            </label>\n            <div className=\"flex flex-wrap gap-1\">\n              {textEffects.map((effect) => (\n                <button\n                  key={effect}\n                  type=\"button\"\n                  onClick={() => updateConfig({ effect })}\n                  className={cn(\n                    \"px-3 py-1.5 text-xs font-medium rounded-lg transition-all cursor-pointer\",\n                    config.effect === effect\n                      ? \"bg-blue-500 text-white\"\n                      : \"bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600\"\n                  )}\n                >\n                  {textEffectLabels[effect]}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Configurações do efeito (se não for 'none') */}\n          {config.effect && config.effect !== 'none' && (\n            <div className=\"space-y-3 pt-2 border-t border-gray-200 dark:border-gray-600\">\n              {/* Cor do efeito */}\n              <div className=\"relative\">\n                <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n                  {config.effect === 'gradient' ? 'Segunda Cor' : 'Cor do Efeito'}\n                </label>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    setShowEffectColorPicker(!showEffectColorPicker);\n                    setShowColorPicker(false);\n                  }}\n                  className={cn(\n                    \"w-full flex items-center gap-2 px-3 py-2 rounded-lg border cursor-pointer\",\n                    \"bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600\",\n                    \"hover:border-blue-400 transition-colors\"\n                  )}\n                >\n                  <div\n                    className=\"w-6 h-6 rounded border border-gray-300 dark:border-gray-500\"\n                    style={{ backgroundColor: config.effectColor || '#000000' }}\n                  />\n                  <span className=\"text-sm text-gray-600 dark:text-gray-300\">\n                    {config.effectColor || '#000000'}\n                  </span>\n                </button>\n                {showEffectColorPicker && (\n                  <div className=\"absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-600\">\n                    <HexColorPicker\n                      color={config.effectColor || '#000000'}\n                      onChange={(color) => updateConfig({ effectColor: color })}\n                    />\n                  </div>\n                )}\n              </div>\n\n              {/* Intensidade do efeito */}\n              <div>\n                <label className=\"block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2\">\n                  Intensidade: {config.effectIntensity}%\n                </label>\n                <input\n                  type=\"range\"\n                  min={0}\n                  max={100}\n                  step={10}\n                  value={config.effectIntensity}\n                  onChange={(e) => updateConfig({ effectIntensity: parseInt(e.target.value, 10) })}\n                  className=\"w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-500\"\n                />\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["fontWeights","textEffects","TypographyInput","value","onChange","label","defaultFontSize","defaultFontWeight","isOpen","setIsOpen","useState","showColorPicker","setShowColorPicker","showEffectColorPicker","setShowEffectColorPicker","containerRef","useRef","config","useEffect","handleClickOutside","event","updateConfig","useCallback","updates","handleFontSizeChange","delta","newSize","handleFontSizeInput","e","val","summary","generateTypographySummary","jsxs","jsx","cn","ChevronUp","ChevronDown","Minus","Plus","weight","HexColorPicker","color","effect"],"mappings":"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"}

package/dist/editor/PropertyEditor/inputs/index.d.ts

@@ -10,4 +10,6 @@ export { ButtonGroupInput } from './ButtonGroupInput';
 export { IconGridInput } from './IconGridInput';
 export { ImageGridInput } from './ImageGridInput';
 export { TypographyInput } from './TypographyInput';
+export { ImageInput } from './ImageInput';
+export { CarouselImagesInput } from './CarouselImagesInput';
 //# sourceMappingURL=index.d.ts.map