forlogic-core 2.0.0 → 2.0.2

package/dist/assets/MediaDoc-C78gvC8p.js

@@ -0,0 +1,459 @@
+import{j as e,a as o,d as a,U as n,dT as s,aJ as l,ex as r,S as d,b as t,c as i}from"./index-DkiftrvI.js";import{C as c}from"./ComponentDocTemplate-CQbBhfvZ.js";import"./ExampleCard-DuLrb3t-.js";function m(){return e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(o,{children:[e.jsx(t,{className:"pb-2",children:e.jsxs(i,{className:"text-sm flex items-center gap-2",children:[e.jsx(s,{className:"h-4 w-4 text-primary"}),"Imagens"]})}),e.jsxs(a,{className:"text-xs text-muted-foreground space-y-1",children:[e.jsxs("p",{children:[e.jsx("strong",{children:"ImageEditor:"})," Edição de URL, upload, legenda, alt, dimensões"]}),e.jsxs("p",{children:[e.jsx("strong",{children:"ImageRenderer:"})," Exibição com alinhamento e download"]})]})]}),e.jsxs(o,{children:[e.jsx(t,{className:"pb-2",children:e.jsxs(i,{className:"text-sm flex items-center gap-2",children:[e.jsx(r,{className:"h-4 w-4 text-primary"}),"Vídeos"]})}),e.jsxs(a,{className:"text-xs text-muted-foreground space-y-1",children:[e.jsxs("p",{children:[e.jsx("strong",{children:"VideoEditor:"})," URL, upload, embed, thumbnail, autoplay"]}),e.jsxs("p",{children:[e.jsx("strong",{children:"VideoRenderer:"})," YouTube, Vimeo e arquivos diretos"]})]})]}),e.jsxs(o,{children:[e.jsx(t,{className:"pb-2",children:e.jsxs(i,{className:"text-sm flex items-center gap-2",children:[e.jsx(n,{className:"h-4 w-4 text-primary"}),"Upload Hook"]})}),e.jsxs(a,{className:"text-xs text-muted-foreground space-y-1",children:[e.jsxs("p",{children:[e.jsx("strong",{children:"useMediaUpload:"})," Hook genérico para upload"]}),e.jsx("p",{children:"Validação de tipo e tamanho, progresso, callbacks"})]})]}),e.jsxs(o,{children:[e.jsx(t,{className:"pb-2",children:e.jsxs(i,{className:"text-sm flex items-center gap-2",children:[e.jsx(d,{className:"h-4 w-4 text-primary"}),"Helpers"]})}),e.jsxs(a,{className:"text-xs text-muted-foreground space-y-1",children:[e.jsxs("p",{children:[e.jsx("strong",{children:"imageHelpers:"})," Compressão, resize, validação"]}),e.jsxs("p",{children:[e.jsx("strong",{children:"videoHelpers:"})," Detecção de provider, normalização"]})]})]})]})}function x(){return e.jsx(c,{title:"Media",description:"Módulo completo para upload, edição e renderização de imagens e vídeos. Inclui editores interativos, renderizadores otimizados e hook genérico de upload.",component:e.jsx(m,{}),installation:`// Importação dos componentes
+import { 
+  ImageEditor, 
+  ImageRenderer, 
+  VideoEditor, 
+  VideoRenderer, 
+  useMediaUpload 
+} from 'forlogic-core';
+
+// Importação de tipos
+import type { 
+  ImageBlockContent, 
+  VideoBlockContent,
+  UploadFunction,
+  DeleteFunction,
+  UploadOptions,
+  UploadResult 
+} from 'forlogic-core';`,usage:`// Exemplo básico de upload de imagem
+const { upload, uploading, progress } = useMediaUpload({
+  uploadFunction: async (file, options) => {
+    // Implementação do upload para seu storage
+    const url = await uploadToStorage(file, options);
+    return { url, path: file.name };
+  }
+});
+
+// Renderizar uma imagem
+<ImageRenderer
+  content={{
+    imageUrl: 'https://example.com/image.jpg',
+    caption: 'Legenda da imagem',
+    alignment: 'center'
+  }}
+/>
+
+// Renderizar um vídeo
+<VideoRenderer
+  content={{
+    videoUrl: 'https://youtube.com/watch?v=...',
+    controls: true
+  }}
+/>`,examples:[{title:"useMediaUpload",description:"Hook genérico para upload de arquivos com validação e progresso.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(n,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Características"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsx("li",{children:"Função de upload customizável (injeção de dependência)"}),e.jsx("li",{children:"Validação de tamanho máximo de arquivo"}),e.jsx("li",{children:"Validação de tipos MIME permitidos"}),e.jsx("li",{children:"Indicador de progresso de upload"}),e.jsx("li",{children:"Callbacks de sucesso e erro"}),e.jsx("li",{children:"Função de delete para remoção de arquivos"}),e.jsx("li",{children:"Toast automático de feedback"})]})]})})}),code:`import { useMediaUpload, getSupabaseClient } from 'forlogic-core';
+
+const supabase = getSupabaseClient();
+
+// Função de upload para Supabase Storage
+const uploadToSupabase: UploadFunction = async (file, options) => {
+  const bucket = options?.bucket || 'media';
+  const path = \`\${Date.now()}-\${file.name}\`;
+  
+  const { data, error } = await supabase.storage
+    .from(bucket)
+    .upload(path, file);
+    
+  if (error) throw error;
+  
+  const { data: { publicUrl } } = supabase.storage
+    .from(bucket)
+    .getPublicUrl(path);
+    
+  return { url: publicUrl, path };
+};
+
+// Função de delete
+const deleteFromSupabase: DeleteFunction = async (path, bucket = 'media') => {
+  const { error } = await supabase.storage
+    .from(bucket)
+    .remove([path]);
+    
+  if (error) throw error;
+};
+
+// Uso do hook
+function MediaUploader() {
+  const { upload, deleteMedia, uploading, progress } = useMediaUpload({
+    uploadFunction: uploadToSupabase,
+    deleteFunction: deleteFromSupabase,
+    defaultOptions: {
+      bucket: 'images',
+      maxSize: 5 * 1024 * 1024, // 5MB
+      allowedTypes: ['image/*']
+    },
+    onSuccess: (result) => {
+      console.log('Upload concluído:', result.url);
+    },
+    onError: (error) => {
+      console.error('Erro no upload:', error.message);
+    }
+  });
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    
+    try {
+      const result = await upload(file, { bucket: 'avatars' });
+      // result.url contém a URL pública do arquivo
+    } catch (error) {
+      // Erro já tratado pelo hook com toast
+    }
+  };
+
+  return (
+    <div>
+      <input type="file" onChange={handleFileSelect} disabled={uploading} />
+      {uploading && <progress value={progress} max={100} />}
+    </div>
+  );
+}`},{title:"ImageEditor",description:"Editor completo para gerenciamento de imagens com upload e propriedades.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Funcionalidades"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsx("li",{children:"Input de URL de imagem externa"}),e.jsx("li",{children:"Upload de arquivo local"}),e.jsx("li",{children:"Campo de legenda (caption)"}),e.jsx("li",{children:"Texto alternativo (alt) para acessibilidade"}),e.jsx("li",{children:"Alinhamento (esquerda, centro, direita)"}),e.jsx("li",{children:"Dimensões customizadas (largura/altura)"}),e.jsx("li",{children:"Toggle para permitir download"}),e.jsx("li",{children:"Preview em tempo real"})]})]})})}),code:`import { ImageEditor } from 'forlogic-core';
+import type { ImageBlockContent } from 'forlogic-core';
+
+function ImageBlockEditor() {
+  const [content, setContent] = useState<ImageBlockContent>({
+    imageUrl: '',
+    caption: '',
+    alt: '',
+    alignment: 'center',
+    allowDownload: false
+  });
+
+  const handleSubmit = (value: ImageBlockContent) => {
+    console.log('Imagem salva:', value);
+    // Salvar no banco de dados
+  };
+
+  return (
+    <ImageEditor
+      value={content}
+      onChange={setContent}
+      onSubmit={handleSubmit}
+      onCancel={() => console.log('Cancelado')}
+      uploadFunction={uploadToSupabase}
+      deleteFunction={deleteFromSupabase}
+      uploadOptions={{
+        bucket: 'images',
+        maxSize: 10 * 1024 * 1024, // 10MB
+        allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif']
+      }}
+    />
+  );
+}
+
+// Tipo ImageBlockContent
+interface ImageBlockContent {
+  imageUrl?: string;
+  imageFile?: string;    // Nome do arquivo
+  imagePath?: string;    // Caminho no storage
+  imageSize?: number;    // Tamanho em bytes
+  caption?: string;      // Legenda
+  alt?: string;          // Texto alternativo
+  width?: number;        // Largura em pixels
+  height?: number;       // Altura em pixels
+  alignment?: 'left' | 'center' | 'right';
+  allowDownload?: boolean;
+}`},{title:"ImageRenderer",description:"Renderizador de imagens com alinhamento, legenda e opção de download.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(l,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Recursos"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsx("li",{children:"Alinhamento responsivo (left, center, right)"}),e.jsx("li",{children:"Exibição de legenda em itálico"}),e.jsx("li",{children:"Dimensões customizadas com max-width: 100%"}),e.jsx("li",{children:"Link de download opcional"}),e.jsx("li",{children:"Estilização com rounded-lg e shadow-md"}),e.jsx("li",{children:"Props className e style para customização"})]})]})})}),code:`import { ImageRenderer } from 'forlogic-core';
+
+// Uso básico
+<ImageRenderer
+  content={{
+    imageUrl: 'https://example.com/photo.jpg',
+    caption: 'Foto da equipe em 2024',
+    alt: 'Equipe reunida no escritório',
+    alignment: 'center'
+  }}
+/>
+
+// Com download habilitado
+<ImageRenderer
+  content={{
+    imageUrl: 'https://example.com/diagram.png',
+    caption: 'Diagrama de arquitetura',
+    alt: 'Diagrama mostrando a arquitetura do sistema',
+    alignment: 'left',
+    allowDownload: true,
+    width: 800,
+    height: 600
+  }}
+  className="my-8"
+/>
+
+// Customização via style
+<ImageRenderer
+  content={{
+    imageUrl: 'https://example.com/banner.jpg',
+    alignment: 'center'
+  }}
+  style={{ maxWidth: '600px' }}
+/>`},{title:"VideoEditor",description:"Editor de vídeos com suporte a URL, upload e embed code.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(r,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Modos de Input"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsxs("li",{children:[e.jsx("strong",{children:"URL:"})," YouTube, Vimeo ou link direto"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Upload:"})," Arquivo de vídeo local"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Embed:"})," Código HTML iframe"]}),e.jsx("li",{children:"Upload de thumbnail customizada"}),e.jsx("li",{children:"Título do vídeo"}),e.jsx("li",{children:"Toggle de autoplay"}),e.jsx("li",{children:"Toggle de controles"}),e.jsx("li",{children:"Preview em tempo real"})]})]})})}),code:`import { VideoEditor } from 'forlogic-core';
+import type { VideoBlockContent } from 'forlogic-core';
+
+function VideoBlockEditor() {
+  const [content, setContent] = useState<VideoBlockContent>({
+    inputType: 'url',
+    videoUrl: '',
+    autoplay: false,
+    controls: true
+  });
+
+  const handleSubmit = (value: VideoBlockContent) => {
+    console.log('Vídeo salvo:', value);
+  };
+
+  return (
+    <VideoEditor
+      value={content}
+      onChange={setContent}
+      onSubmit={handleSubmit}
+      onCancel={() => console.log('Cancelado')}
+      uploadFunction={uploadToSupabase}
+      deleteFunction={deleteFromSupabase}
+      uploadOptions={{
+        bucket: 'videos',
+        maxSize: 100 * 1024 * 1024, // 100MB
+        allowedTypes: ['video/mp4', 'video/webm', 'video/ogg']
+      }}
+    />
+  );
+}
+
+// Tipo VideoBlockContent
+interface VideoBlockContent {
+  inputType?: 'url' | 'upload' | 'embed';
+  videoUrl?: string;
+  videoFile?: string;
+  videoPath?: string;
+  videoSize?: number;
+  embedCode?: string;      // Código iframe
+  thumbnail?: string;      // URL da thumbnail
+  thumbnailFile?: string;
+  thumbnailPath?: string;
+  title?: string;
+  autoplay?: boolean;
+  controls?: boolean;
+}`},{title:"VideoRenderer",description:"Renderizador inteligente com detecção automática de provider.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(r,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Providers Suportados"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsxs("li",{children:[e.jsx("strong",{children:"YouTube:"})," Detecção automática e embed otimizado"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Vimeo:"})," Normalização de URL e embed"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Arquivo:"})," Player HTML5 nativo"]}),e.jsx("li",{children:"Aspect ratio 16:9 para embeds"}),e.jsx("li",{children:"Autoplay com mute automático"}),e.jsx("li",{children:"Controles configuráveis"}),e.jsx("li",{children:"Thumbnail poster para arquivos"})]})]})})}),code:`import { VideoRenderer } from 'forlogic-core';
+
+// YouTube
+<VideoRenderer
+  content={{
+    videoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    title: 'Tutorial de React',
+    controls: true
+  }}
+/>
+
+// Vimeo
+<VideoRenderer
+  content={{
+    videoUrl: 'https://vimeo.com/123456789',
+    autoplay: false,
+    controls: true
+  }}
+/>
+
+// Arquivo direto
+<VideoRenderer
+  content={{
+    videoUrl: 'https://storage.example.com/video.mp4',
+    thumbnail: 'https://storage.example.com/thumbnail.jpg',
+    title: 'Apresentação do Produto',
+    autoplay: false,
+    controls: true
+  }}
+/>
+
+// Via embed code
+<VideoRenderer
+  content={{
+    embedCode: '<iframe src="https://player.vimeo.com/video/..." />',
+    title: 'Vídeo Incorporado'
+  }}
+/>`},{title:"Helpers de Vídeo",description:"Funções utilitárias para manipulação de URLs e detecção de providers.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(d,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Funções Disponíveis"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"detectVideoProvider"}),": Identifica YouTube, Vimeo ou file"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"normalizeYouTubeUrl"}),": Converte para URL de embed"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"normalizeVimeoUrl"}),": Converte para URL de embed"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"parseIframeSrc"}),": Extrai src de código iframe"]})]})]})})}),code:`import { 
+  detectVideoProvider, 
+  normalizeYouTubeUrl, 
+  normalizeVimeoUrl,
+  parseIframeSrc 
+} from 'forlogic-core';
+
+// Detectar provider
+const provider = detectVideoProvider('https://www.youtube.com/watch?v=abc123');
+// Retorna: 'youtube' | 'vimeo' | 'file'
+
+// Normalizar URL do YouTube para embed
+const youtubeEmbed = normalizeYouTubeUrl(
+  'https://www.youtube.com/watch?v=abc123',
+  false // autoplay
+);
+// Retorna: 'https://www.youtube.com/embed/abc123'
+
+// Normalizar URL do Vimeo para embed
+const vimeoEmbed = normalizeVimeoUrl(
+  'https://vimeo.com/123456789',
+  true // autoplay
+);
+// Retorna: 'https://player.vimeo.com/video/123456789?autoplay=1'
+
+// Extrair src de iframe
+const src = parseIframeSrc('<iframe src="https://..." />');
+// Retorna a URL do src`},{title:"Helpers de Imagem",description:"Funções utilitárias para manipulação e validação de imagens.",preview:e.jsx(o,{children:e.jsx(a,{className:"pt-4",children:e.jsxs("div",{className:"space-y-3 text-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s,{className:"h-4 w-4 text-primary"}),e.jsx("span",{className:"font-medium",children:"Funções Disponíveis"})]}),e.jsxs("ul",{className:"list-disc list-inside text-muted-foreground space-y-1 text-xs",children:[e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"compressImage"}),": Comprime imagem mantendo qualidade"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"resizeImage"}),": Redimensiona para max width/height"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"getImageDimensions"}),": Obtém largura e altura"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"isValidImageType"}),": Valida tipos MIME"]}),e.jsxs("li",{children:[e.jsx("code",{className:"bg-muted px-1 rounded",children:"formatFileSize"}),": Formata bytes para KB/MB"]})]})]})})}),code:`import { 
+  compressImage, 
+  resizeImage, 
+  getImageDimensions,
+  isValidImageType,
+  formatFileSize 
+} from 'forlogic-core';
+
+// Comprimir imagem
+const compressedFile = await compressImage(file, {
+  quality: 0.8,
+  maxWidth: 1920,
+  maxHeight: 1080
+});
+
+// Redimensionar imagem
+const resizedFile = await resizeImage(file, {
+  maxWidth: 800,
+  maxHeight: 600,
+  maintainAspectRatio: true
+});
+
+// Obter dimensões
+const { width, height } = await getImageDimensions(file);
+console.log(\`Imagem: \${width}x\${height}\`);
+
+// Validar tipo
+const isValid = isValidImageType(file, ['image/jpeg', 'image/png']);
+if (!isValid) {
+  throw new Error('Tipo de arquivo não suportado');
+}
+
+// Formatar tamanho
+const size = formatFileSize(file.size);
+console.log(\`Tamanho: \${size}\`); // "2.5 MB"`},{title:"Exemplo Completo Integrado",description:"Exemplo de uso completo do módulo Media em um editor de posts.",preview:e.jsxs(o,{className:"border-primary/20",children:[e.jsx(t,{className:"pb-2",children:e.jsx(i,{className:"text-sm",children:"Editor de Mídia Completo"})}),e.jsxs(a,{className:"text-xs text-muted-foreground",children:[e.jsx("p",{children:"Demonstração de integração com:"}),e.jsxs("ul",{className:"list-disc list-inside mt-2 space-y-1",children:[e.jsx("li",{children:"Upload para Supabase Storage"}),e.jsx("li",{children:"Alternância entre ImageEditor e VideoEditor"}),e.jsx("li",{children:"Renderização com ImageRenderer e VideoRenderer"}),e.jsx("li",{children:"Gerenciamento de estado com hooks"})]})]})]}),code:`import { useState } from 'react';
+import {
+  ImageEditor,
+  ImageRenderer,
+  VideoEditor,
+  VideoRenderer,
+  useMediaUpload
+} from 'forlogic-core';
+import type { 
+  ImageBlockContent, 
+  VideoBlockContent,
+  UploadFunction,
+  DeleteFunction 
+} from 'forlogic-core';
+import { getSupabaseClient } from 'forlogic-core';
+
+const supabase = getSupabaseClient();
+
+// Funções de upload/delete para Supabase
+const uploadToSupabase: UploadFunction = async (file, options) => {
+  const bucket = options?.bucket || 'media';
+  const path = \`\${Date.now()}-\${file.name}\`;
+  
+  const { data, error } = await supabase.storage
+    .from(bucket)
+    .upload(path, file);
+    
+  if (error) throw error;
+  
+  const { data: { publicUrl } } = supabase.storage
+    .from(bucket)
+    .getPublicUrl(path);
+    
+  return { url: publicUrl, path };
+};
+
+const deleteFromSupabase: DeleteFunction = async (path, bucket = 'media') => {
+  const { error } = await supabase.storage.from(bucket).remove([path]);
+  if (error) throw error;
+};
+
+// Componente principal
+function MediaBlockManager() {
+  const [mediaType, setMediaType] = useState<'image' | 'video'>('image');
+  const [imageContent, setImageContent] = useState<ImageBlockContent>({});
+  const [videoContent, setVideoContent] = useState<VideoBlockContent>({});
+  const [savedContent, setSavedContent] = useState<{
+    type: 'image' | 'video';
+    content: ImageBlockContent | VideoBlockContent;
+  } | null>(null);
+
+  const handleSaveImage = (content: ImageBlockContent) => {
+    setSavedContent({ type: 'image', content });
+  };
+
+  const handleSaveVideo = (content: VideoBlockContent) => {
+    setSavedContent({ type: 'video', content });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Seletor de tipo */}
+      <div className="flex gap-2">
+        <button
+          onClick={() => setMediaType('image')}
+          className={\`px-4 py-2 rounded \${
+            mediaType === 'image' ? 'bg-primary text-primary-foreground' : 'bg-muted'
+          }\`}
+        >
+          Imagem
+        </button>
+        <button
+          onClick={() => setMediaType('video')}
+          className={\`px-4 py-2 rounded \${
+            mediaType === 'video' ? 'bg-primary text-primary-foreground' : 'bg-muted'
+          }\`}
+        >
+          Vídeo
+        </button>
+      </div>
+
+      {/* Editor */}
+      <div className="border rounded-lg p-4">
+        {mediaType === 'image' ? (
+          <ImageEditor
+            value={imageContent}
+            onChange={setImageContent}
+            onSubmit={handleSaveImage}
+            onCancel={() => setImageContent({})}
+            uploadFunction={uploadToSupabase}
+            deleteFunction={deleteFromSupabase}
+            uploadOptions={{
+              bucket: 'images',
+              maxSize: 10 * 1024 * 1024,
+              allowedTypes: ['image/*']
+            }}
+          />
+        ) : (
+          <VideoEditor
+            value={videoContent}
+            onChange={setVideoContent}
+            onSubmit={handleSaveVideo}
+            onCancel={() => setVideoContent({})}
+            uploadFunction={uploadToSupabase}
+            deleteFunction={deleteFromSupabase}
+            uploadOptions={{
+              bucket: 'videos',
+              maxSize: 100 * 1024 * 1024,
+              allowedTypes: ['video/*']
+            }}
+          />
+        )}
+      </div>
+
+      {/* Preview do conteúdo salvo */}
+      {savedContent && (
+        <div className="border rounded-lg p-4">
+          <h3 className="font-medium mb-4">Preview</h3>
+          {savedContent.type === 'image' ? (
+            <ImageRenderer content={savedContent.content as ImageBlockContent} />
+          ) : (
+            <VideoRenderer content={savedContent.content as VideoBlockContent} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}`}],props:[{name:"uploadFunction",type:"UploadFunction",description:"Função de upload customizada (obrigatória para uploads)"},{name:"deleteFunction",type:"DeleteFunction",description:"Função de delete customizada"},{name:"defaultOptions",type:"UploadOptions",description:"Opções padrão: bucket, maxSize, allowedTypes"},{name:"onSuccess",type:"(result: UploadResult) => void",description:"Callback executado após upload bem-sucedido"},{name:"onError",type:"(error: Error) => void",description:"Callback executado em caso de erro"},{name:"value",type:"ImageBlockContent | VideoBlockContent",description:"Valor atual do conteúdo"},{name:"onChange",type:"(value) => void",description:"Callback para mudanças no conteúdo"},{name:"onSubmit",type:"(value) => void",description:"Callback ao salvar o conteúdo"},{name:"onCancel",type:"() => void",description:"Callback ao cancelar edição"},{name:"uploadOptions",type:"UploadOptions",description:"Opções de upload específicas para o editor"},{name:"content",type:"ImageBlockContent | VideoBlockContent",description:"Conteúdo a ser renderizado"},{name:"className",type:"string",description:"Classes CSS adicionais"},{name:"style",type:"CSSProperties",description:"Estilos inline adicionais"}],accessibility:["ImageRenderer inclui atributo alt obrigatório para acessibilidade","VideoRenderer usa atributo title no iframe para identificação","Controles de vídeo habilitados por padrão para navegação por teclado","Autoplay sempre acompanhado de muted para conformidade com navegadores","Links de download possuem texto descritivo","Todos os inputs dos editores possuem labels associados"],notes:["O hook useMediaUpload requer que o projeto forneça as funções de upload/delete","A função uploadFunction deve retornar { url: string, path?: string }","VideoRenderer detecta automaticamente YouTube e Vimeo pela URL","Para vídeos locais, use o player HTML5 nativo com controles","Dimensões são opcionais; imagens usam max-width: 100% por padrão","O módulo não inclui implementação de storage - use Supabase, S3, etc.","Helpers de imagem usam Canvas API para compressão e resize"]})}export{x as MediaDoc};