negodesign 0.0.35 → 0.0.36

package/dist/components/pages/privacy-policy-or-terms-of-use/data.js

@@ -0,0 +1,179 @@
+export const privacyPolicyData = {
+    title: "Política de Privacidade e Termos de Uso",
+    lastUpdated: "15 de Agosto de 2026",
+    breadcrumb: [
+        { label: "Início", href: "/" },
+        { label: "Institucional", href: "#" },
+        { label: "Termos & Privacidade" },
+    ],
+    sections: [
+        {
+            id: "introducao",
+            number: "1",
+            title: "Introdução",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Bem-vindo à plataforma Negoturismo. A sua privacidade e a transparência nas relações com os nossos utilizadores, parceiros e clientes são valores fundamentais para a nossa organização.",
+                },
+                {
+                    type: "paragraph",
+                    text: "Este documento estabelece as diretrizes de utilização da plataforma digital Negoturismo, bem como as políticas de recolha, tratamento e proteção dos dados pessoais fornecidos durante o acesso aos nossos serviços turísticos, reservas de hotelaria, voos e contratação de guias e tradutores.",
+                },
+            ],
+            subsections: [
+                {
+                    id: "aceitacao-termos",
+                    number: "1.1",
+                    title: "Aceitação dos Termos",
+                    level: 2,
+                    blocks: [
+                        {
+                            type: "paragraph",
+                            text: "Ao aceder, navegar ou utilizar qualquer funcionalidade do portal Negoturismo, o utilizador declara expressamente que leu, compreendeu e concorda com todas as disposições aqui estipuladas.",
+                        },
+                        {
+                            type: "list",
+                            items: [
+                                "Utilizadores registados têm acesso a funcionalidades exclusivas de gestão de reservas.",
+                                "Parceiros comerciais e fornecedores de serviços sujeitam-se ainda aos contratos específicos de afiliação.",
+                                "O uso continuado da plataforma após eventuais alterações implica aceitação tácita das novas condições.",
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: "recolha-dados",
+            number: "2",
+            title: "Recolha e Tratamento de Dados Pessoais",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Para garantir a prestação eficaz dos nossos serviços e proporcionar uma experiência personalizada, recolhemos dados necessários para processamento de pagamentos, validação de identidade e emissão de vouchers de viagem.",
+                },
+            ],
+            subsections: [
+                {
+                    id: "dados-fornecidos",
+                    number: "2.1",
+                    title: "Dados Fornecidos Diretamente",
+                    level: 2,
+                    blocks: [
+                        {
+                            type: "list",
+                            items: [
+                                "Nome completo, número de identificação civil ou passaporte.",
+                                "Endereço de correio eletrónico, número de telefone e morada de faturação.",
+                                "Informações de pagamento (processadas de forma encriptada através de gateways certificados).",
+                                "Preferências de viagem, itinerários e histórico de reservas efetuadas.",
+                            ],
+                        },
+                    ],
+                },
+                {
+                    id: "finalidade-tratamento",
+                    number: "2.2",
+                    title: "Finalidades do Tratamento",
+                    level: 2,
+                    blocks: [
+                        {
+                            type: "paragraph",
+                            text: "Os dados recolhidos destinam-se exclusivamente às seguintes finalidades legítimas:",
+                        },
+                        {
+                            type: "list",
+                            items: [
+                                "Processamento e confirmação de reservas junto a companhias aéreas, hotéis e parceiros locais.",
+                                "Comunicação com o cliente sobre alterações de voos, confirmações e avisos de suporte ao cliente.",
+                                "Prevenção contra fraudes e garantia da segurança operacional da plataforma.",
+                                "Envio de ofertas e recomendações personalizadas quando previamente autorizado pelo utilizador.",
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: "reservas-pagamentos",
+            number: "3",
+            title: "Reservas, Preços e Pagamentos",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Todas as transações financeiras efetuadas na plataforma são expressas na moeda indicada no momento da compra (Kwanza - AOA ou moeda estrangeira correspondente) e incluem todas as taxas aplicáveis por lei.",
+                },
+                {
+                    type: "list",
+                    items: [
+                        "A confirmação da reserva está sujeita à validação do pagamento pela instituição financeira emissora.",
+                        "Preços e disponibilidades de quartos e voos são dinâmicos e sujeitos a alteração até à finalização da compra.",
+                        "O cliente é responsável pela verificação da exatidão dos dados antes da confirmação do pagamento.",
+                    ],
+                },
+            ],
+        },
+        {
+            id: "cancelamentos-reembolsos",
+            number: "4",
+            title: "Cancelamentos e Reembolsos",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "As condições de cancelamento, alteração de datas e direito a reembolso variam de acordo com as políticas individuais de cada fornecedor de serviços (hotel, companhia aérea, operadora de turismo).",
+                },
+                {
+                    type: "list",
+                    items: [
+                        "Tarifas não-reembolsáveis não conferem direito à devolução dos valores pagos em caso de desistência.",
+                        "Pedidos de cancelamento dentro do prazo legal são processados num prazo estimado de 5 a 15 dias úteis.",
+                        "Eventuais taxas administrativas de intermediação poderão ser deduzidas do montante a reembolsar conforme o regulamento da tarifa.",
+                    ],
+                },
+            ],
+        },
+        {
+            id: "seguranca-cookies",
+            number: "5",
+            title: "Segurança da Informação e Cookies",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Implementamos protocolos de segurança modernos, incluindo encriptação TLS/SSL e padrões de controlo de acesso rigorosos para proteger os seus dados contra acessos não autorizados, perda ou destruição.",
+                },
+                {
+                    type: "paragraph",
+                    text: "Utilizamos cookies de sessão e analíticos para melhorar a navegação, memorizar preferências e compreender como os nossos serviços são utilizados pelos visitantes.",
+                },
+            ],
+        },
+        {
+            id: "contacto-suporte",
+            number: "6",
+            title: "Contactos e Apoio ao Cliente",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Caso tenha qualquer dúvida sobre esta Política de Privacidade ou pretenda exercer os seus direitos de acesso, retificação ou eliminação de dados, contacte a nossa equipa de encarregados de proteção de dados:",
+                },
+                {
+                    type: "list",
+                    items: [
+                        "E-mail: privacidade@negoturismo.ao",
+                        "Suporte Geral: suporte@negoturismo.ao",
+                        "Telefone: +244 923 000 000 / +244 945 000 000",
+                        "Endereço: Luanda, Angola",
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export default privacyPolicyData;

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/DocSectionView.svelte

@@ -12,6 +12,7 @@
 <script lang="ts">
   import type { DocSection } from "../types";
   import ContentBlockView from "./ContentBlockView.svelte";
+  import DocSectionView from "./DocSectionView.svelte";
 
   let { section }: { section: DocSection } = $props();
 
@@ -37,7 +38,7 @@
   {#if section.subsections}
     <div class="flex flex-col gap-6 mt-2">
       {#each section.subsections as subsection (subsection.id)}
-        <svelte:self section={subsection} />
+        <DocSectionView section={subsection} />
       {/each}
     </div>
   {/if}

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/DocSectionView.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DocSection } from "../types";
+import DocSectionView from "./DocSectionView.svelte";
 type $$ComponentProps = {
     section: DocSection;
 };

package/dist/components/pages/product-details/01/ProductDetails01.svelte

@@ -17,6 +17,7 @@
   import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
   import ProductDetailImage from "../shared/ProductDetailImage.svelte";
   import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
   import type { ProductDetailsData } from "../types";
@@ -42,10 +43,14 @@
   </div>
 
   <div class="grid gap-10 lg:grid-cols-2">
-    <ProductDetailImage images={data.gallery} {isLoading} />
+    <ProductDetailImage files={data.gallery} {isLoading} />
 
     <div class="flex flex-col gap-5">
-      <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+      <ProductDetailHeader
+        title={data.title}
+        subtitle={data.subtitle}
+        {isLoading}
+      />
 
       <ProductDetailTags tags={data.tags} {isLoading} />
 
@@ -63,9 +68,16 @@
     </div>
   </div>
 
-  {#if data.location}
-    <div class="mt-12">
-      <ProductDetailMap location={data.location} {isLoading} />
-    </div>
-  {/if}
+  <div class="grid gap-10 grid-cols-1 md:grid-cols-2 mt-5 md:mt-10">
+    {#if data.reviews}
+      <div>
+        <ProductDetailReviews reviews={data.reviews} {isLoading} />
+      </div>
+    {/if}
+    {#if data.location}
+      <div>
+        <ProductDetailMap location={data.location} {isLoading} />
+      </div>
+    {/if}
+  </div>
 </div>

package/dist/components/pages/product-details/02/ProductDetails02.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
   /**
-   * Variante 02 da página de detalhes do produto.
-   * Layout com galeria em destaque e conteúdo em coluna centralizada.
+   * Variante 03 da página de detalhes do produto.
+   * Layout com galeria, conteúdo expandido e painel de compra sticky.
    * @component
    * @example
    * ```svelte
-   * <ProductDetails02 {data} {onBuy} {onFavorite} {onCart} />
+   * <ProductDetails03 {data} {onBuy} {onFavorite} {onCart} />
    * ```
    */
 </script>
@@ -17,6 +17,7 @@
   import ProductDetailFilesVertical from "../shared/ProductDetailFilesVertical.svelte";
   import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
   import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
   import type { ProductDetailsData } from "../types";
@@ -36,52 +37,56 @@
   } = $props();
 </script>
 
-<div class="bg-background">
-  <ProductDetailFilesVertical
-    images={data.gallery}
-    className="mx-auto max-w-5xl px-6 pt-10"
-    {isLoading}
-  />
+<div class="mx-auto max-w-7xl px-6 py-10">
+  <div class="mb-8">
+    <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
+  </div>
 
-  <div class="mx-auto max-w-3xl px-6 py-12">
-    <div class="flex flex-col gap-6">
-      <div class="flex justify-center">
-        <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
-      </div>
+  <div class="grid gap-10 lg:grid-cols-[1fr_26rem]">
+    <div class="flex flex-col gap-8">
+      <ProductDetailFilesVertical files={data.gallery} {isLoading} />
 
-      <ProductDetailHeader
-        title={data.title}
-        subtitle={data.subtitle}
-        className="items-center text-center"
-        {isLoading}
-      />
+      <div class="flex flex-col gap-5">
+        <ProductDetailHeader
+          title={data.title}
+          subtitle={data.subtitle}
+          {isLoading}
+        />
 
-      <div class="flex justify-center">
         <ProductDetailTags tags={data.tags} {isLoading} />
-      </div>
 
-      <ProductDetailDescription
-        description={data.description}
-        longDescription={data.longDescription}
-        {isLoading}
-      />
+        <ProductDetailDescription
+          description={data.description}
+          longDescription={data.longDescription}
+          {isLoading}
+        />
 
-      {#if data.features}
-        <div class="mx-auto w-full max-w-md">
+        {#if data.features}
           <ProductDetailFeatures features={data.features} {isLoading} />
-        </div>
-      {/if}
-
-      <div class="flex justify-center">
-        <div class="w-full max-w-sm">
-          <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-        </div>
+        {/if}
       </div>
     </div>
+
+    <aside class="lg:sticky lg:top-8 lg:self-start">
+      <div class="rounded-lg border p-6">
+        <ProductPurchasePanel
+          {data}
+          {isLoading}
+          {onBuy}
+          {onFavorite}
+          {onCart}
+        />
+      </div>
+      {#if data.reviews}
+        <div class="mt-5 md:mt-10">
+          <ProductDetailReviews reviews={data.reviews} {isLoading} />
+        </div>
+      {/if}
+    </aside>
   </div>
 
   {#if data.location}
-    <div class="mx-auto max-w-3xl px-6 pb-12">
+    <div class="mt-12">
       <ProductDetailMap location={data.location} {isLoading} />
     </div>
   {/if}

package/dist/components/pages/product-details/03/ProductDetails03.svelte

@@ -1,25 +1,26 @@
 <script lang="ts" module>
   /**
-   * Variante 03 da página de detalhes do produto.
-   * Layout com galeria, conteúdo expandido e painel de compra sticky.
+   * Variante 04 da página de detalhes do produto.
+   * Layout com galeria, informações e abas de conteúdo (descrição,
+   * avaliações) abaixo dos dados principais.
    * @component
    * @example
    * ```svelte
-   * <ProductDetails03 {data} {onBuy} {onFavorite} {onCart} />
+   * <ProductDetails04 {data} {onBuy} {onFavorite} {onCart} />
    * ```
    */
 </script>
 
 <script lang="ts">
   import ProductDetailBreadcrumb from "../shared/ProductDetailBreadcrumb.svelte";
-  import ProductDetailDescription from "../shared/ProductDetailDescription.svelte";
-  import ProductDetailFeatures from "../shared/ProductDetailFeatures.svelte";
-  import ProductDetailFilesVertical from "../shared/ProductDetailFilesVertical.svelte";
   import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
+  import ProductDetailImage from "../shared/ProductDetailImage.svelte";
   import ProductDetailMap from "../shared/ProductDetailMap.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
+  import ProductDetailTabs from "../shared/ProductDetailTabs.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
   import type { ProductDetailsData } from "../types";
+  import { useDevice } from "../../../../hooks/responsive.svelte";
 
   let {
     data,
@@ -34,6 +35,7 @@
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;
   } = $props();
+  const responsive = useDevice();
 </script>
 
 <div class="mx-auto max-w-7xl px-6 py-10">
@@ -41,37 +43,39 @@
     <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
   </div>
 
-  <div class="grid gap-10 lg:grid-cols-[1fr_22rem]">
-    <div class="flex flex-col gap-8">
-      <ProductDetailFilesVertical images={data.gallery} {isLoading} />
+  <div class="grid gap-10 lg:grid-cols-2">
+    <ProductDetailImage files={data.gallery} {isLoading} />
 
-      <div class="flex flex-col gap-5">
-        <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+    <div class="flex flex-col gap-5">
+      <ProductDetailHeader
+        title={data.title}
+        subtitle={data.subtitle}
+        {isLoading}
+      />
 
-        <ProductDetailTags tags={data.tags} {isLoading} />
+      <ProductDetailTags tags={data.tags} {isLoading} />
 
-        <ProductDetailDescription
-          description={data.description}
-          longDescription={data.longDescription}
-          {isLoading}
-        />
+      <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
 
-        {#if data.features}
-          <ProductDetailFeatures features={data.features} {isLoading} />
+      {#if !responsive.isMobile}
+        {#if data.location}
+          <div class="mt-5">
+            <ProductDetailMap location={data.location} {isLoading} />
+          </div>
         {/if}
-      </div>
+      {/if}
     </div>
+  </div>
 
-    <aside class="lg:sticky lg:top-8 lg:self-start">
-      <div class="rounded-lg border p-6">
-        <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-      </div>
-    </aside>
+  <div class="mt-12 border-t pt-8">
+    <ProductDetailTabs tabs={data.tabs} {data} {isLoading} />
   </div>
 
-  {#if data.location}
-    <div class="mt-12">
-      <ProductDetailMap location={data.location} {isLoading} />
-    </div>
+  {#if responsive.isMobile}
+    {#if data.location}
+      <div class="mt-12">
+        <ProductDetailMap location={data.location} {isLoading} />
+      </div>
+    {/if}
   {/if}
 </div>

package/dist/components/pages/product-details/ProductDetails.svelte

@@ -20,18 +20,22 @@
 <script lang="ts">
   import type { ProductDetailsProps } from "./types";
   import ProductDetails01 from "./01/ProductDetails01.svelte";
-  import ProductDetails02 from "./02/ProductDetails02.svelte";
-  import ProductDetails03 from "./03/ProductDetails03.svelte";
-  import ProductDetails04 from "./04/ProductDetails04.svelte";
+  import ProductDetails03 from "./02/ProductDetails02.svelte";
+  import ProductDetails04 from "./03/ProductDetails03.svelte";
 
-  let { varient = 1, data, isLoading = false, onBuy, onFavorite, onCart }: ProductDetailsProps = $props();
+  let {
+    varient = 1,
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: ProductDetailsProps = $props();
 </script>
 
 {#if varient === 2}
-  <ProductDetails02 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-{:else if varient === 3}
   <ProductDetails03 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-{:else if varient === 4}
+{:else if varient === 3}
   <ProductDetails04 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
 {:else}
   <ProductDetails01 {data} {isLoading} {onBuy} {onFavorite} {onCart} />

package/dist/components/pages/product-details/shared/ProductDetailFeatures.svelte

@@ -12,12 +12,13 @@
 
 <script lang="ts">
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsFeatureProps } from "../types";
 
   let {
     features,
     isLoading = false,
   }: {
-    features: string[];
+    features: string[] | ProductDetailsFeatureProps[];
     isLoading?: boolean;
   } = $props();
 </script>
@@ -29,10 +30,15 @@
     {/each}
   </div>
 {:else}
-  <ul class="flex flex-col gap-2">
-    {#each features as feature, i (feature)}
-      <li class="flex items-start gap-2 text-sm text-foreground/90">
-        <span aria-hidden="true" class="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary"></span>
+  <ul class="flex flex-wrap gap-2 md:gap-5">
+    {#each features as feature, i (i)}
+      <li
+        class="flex items-start gap-2 text-sm text-foreground/90 border rounded-lg p-2"
+      >
+        <span
+          aria-hidden="true"
+          class="mt-1.5 size-1.5 shrink-0 rounded-full bg-gradient"
+        ></span>
         <span>{feature}</span>
       </li>
     {/each}

package/dist/components/pages/product-details/shared/ProductDetailFeatures.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { ProductDetailsFeatureProps } from "../types";
 type $$ComponentProps = {
-    features: string[];
+    features: string[] | ProductDetailsFeatureProps[];
     isLoading?: boolean;
 };
 declare const ProductDetailFeatures: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/pages/product-details/shared/ProductDetailFilesVertical.svelte

@@ -1,11 +1,12 @@
 <script lang="ts" module>
   /**
-   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem.
+   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem/vídeo.
    * Quando `isLoading` é true, exibe Skeletons.
+   * Se houver um item do tipo "video", ele é priorizado (aparece primeiro).
    * @component
    * @example
    * ```svelte
-   * <ProductDetailFilesVertical images={data.gallery} />
+   * <ProductDetailFilesVertical files={data.gallery} />
    * ```
    */
 </script>
@@ -15,57 +16,88 @@
   import type { ProductDetailsImage } from "../types";
 
   let {
-    images,
+    files,
     className,
     isLoading = false,
   }: {
-    images: ProductDetailsImage[];
+    files: ProductDetailsImage[];
     className?: string;
     isLoading?: boolean;
   } = $props();
 
+  // Vídeo primeiro, mantendo a ordem relativa do resto
+  const sortedFiles = $derived(
+    [...(files ?? [])].sort(
+      (a, b) => (a.type === "video" ? 0 : 1) - (b.type === "video" ? 0 : 1),
+    ),
+  );
+
   let activeIndex = $state(0);
-  const active = $derived(images[activeIndex]);
+  const active = $derived(sortedFiles[activeIndex]);
 </script>
 
+{#snippet media(file: ProductDetailsImage, cls: string)}
+  {#if file.type === "video"}
+    <!-- svelte-ignore a11y_media_has_caption -->
+    <video src={file.src} class={cls} muted playsinline></video>
+  {:else}
+    <img src={file.src} alt={file.alt ?? ""} class={cls} />
+  {/if}
+{/snippet}
+
 <div class="flex flex-col gap-3 {className}">
   {#if isLoading}
     <div class="flex gap-3">
       <div class="flex shrink-0 flex-col gap-2">
-        {#each Array.from({ length: Math.min(images.length || 3, 4) }) as _, i (i)}
+        {#each Array.from( { length: Math.min(files.length || 3, 4) }, ) as _, i (i)}
           <Skeleton class="h-16 w-16 rounded-md" />
         {/each}
       </div>
       <Skeleton class="aspect-4/3 min-w-0 flex-1 rounded-lg" />
     </div>
-  {:else if images.length > 0}
+  {:else if sortedFiles.length > 0}
     <div class="flex gap-3">
       <div class="flex shrink-0 flex-col gap-2">
-        {#each images as image, i (image.src)}
+        {#each sortedFiles as file, i (file.src)}
           <button
             type="button"
-            aria-label={image.alt ?? `Imagem ${i + 1}`}
+            aria-label={file.alt ?? `Item ${i + 1}`}
             onclick={() => (activeIndex = i)}
-            class="overflow-hidden rounded-md border transition-opacity {i ===
+            class="relative overflow-hidden rounded-md border transition-opacity {i ===
             activeIndex
               ? 'border-foreground opacity-100'
               : 'border-muted opacity-60 hover:opacity-100'}"
           >
-            <img
-              src={image.src}
-              alt={image.alt ?? ""}
-              class="h-16 w-16 object-cover"
-            />
+            {@render media(file, "h-16 w-16 object-cover")}
+            {#if file.type === "video"}
+              <span
+                class="absolute inset-0 flex items-center justify-center bg-black/30"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  class="h-4 w-4 fill-white"
+                  aria-hidden="true"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            {/if}
           </button>
         {/each}
       </div>
 
       <div class="min-w-0 flex-1 overflow-hidden rounded-lg border">
-        <img
-          src={active.src}
-          alt={active.alt ?? ""}
-          class="aspect-4/3 w-full object-cover"
-        />
+        {#if active.type === "video"}
+          <!-- svelte-ignore a11y_media_has_caption -->
+          <video
+            src={active.src}
+            class="aspect-4/3 w-full object-cover"
+            controls
+            playsinline
+          ></video>
+        {:else}
+          {@render media(active, "aspect-4/3 w-full object-cover")}
+        {/if}
       </div>
     </div>
   {/if}