teqo-backup/docs/plans/central-conteudos-apagar-peca-ui-design.html
2026-09-24 22:34:47 -03:00

1429 lines
63 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR" data-theme="campaign">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — C222 · Central de Conteúdos — apagar uma peça</title>
<style type="text/tailwindcss">
@theme inline {
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-border: var(--sidebar-border);
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
}
[data-theme='campaign'] {
--radius: 0.5rem;
--background: #ffffff;
--foreground: #1c1917;
--card: #ffffff;
--card-foreground: #1c1917;
--popover: #ffffff;
--popover-foreground: #1c1917;
--primary: #c51414;
--primary-foreground: #ffffff;
--secondary: #f5f5f4;
--secondary-foreground: #292524;
--muted: #f4f4f5;
--muted-foreground: #6b7280;
--accent: #f4f4f5;
--accent-foreground: #1c1917;
--destructive: #b42318;
--border: rgb(28 25 23 / 12%);
--input: rgb(28 25 23 / 16%);
--ring: #c51414;
--sidebar: #fafaf9;
--sidebar-foreground: #1c1917;
--sidebar-accent: #f5f5f4;
--sidebar-border: rgb(28 25 23 / 12%);
}
* {
box-sizing: border-box;
}
body {
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
.board {
background-color: #efeeec;
background-image: radial-gradient(rgb(28 25 23 / 8%) 0.7px, transparent 0.7px);
background-size: 16px 16px;
}
.scene-shadow {
box-shadow: 0 18px 52px rgb(28 25 23 / 10%);
}
.dialog-shadow {
box-shadow: 0 24px 80px rgb(28 25 23 / 25%);
}
</style>
</head>
<body class="board min-h-screen bg-background text-foreground antialiased">
<!-- Ícones inline seguem o grid e o stroke do Lucide. Não há SVG próprio. -->
<main class="mx-auto max-w-[1480px] space-y-16 px-4 py-10 md:px-8 md:py-14">
<header class="max-w-3xl">
<div
class="inline-flex min-h-6 items-center rounded-full bg-primary px-2.5 text-xs font-semibold text-primary-foreground"
>
C222 · design do gate
</div>
<h1 class="mt-4 text-3xl font-semibold tracking-tight">
Apagar sem competir com o trabalho
</h1>
<p class="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">
A saída definitiva fica disponível na lista e na ficha, mas permanece visualmente abaixo
da próxima ação. A confirmação cresce apenas quando existe um link público.
</p>
</header>
<nav aria-label="Índice de cenas" class="flex flex-wrap gap-2 text-xs">
<a
href="#lista-desktop"
class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
>A · Lista desktop</a
>
<a
href="#lista-mobile"
class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
>B · Lista mobile</a
>
<a href="#detalhe" class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
>C–D · Detalhe</a
>
<a
href="#confirmacoes"
class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
>E–F · Confirmações</a
>
<a
href="#feedback"
class="rounded-full border border-border bg-card px-3 py-1.5 font-medium"
>G–H · Erro e envio</a
>
</nav>
<!-- CENA A — LISTA DESKTOP -->
<section id="lista-desktop" aria-labelledby="lista-desktop-title">
<div class="mb-3 flex items-end justify-between gap-4">
<div>
<p class="text-xs font-medium text-muted-foreground">Cena A · desktop ~1280</p>
<h2 id="lista-desktop-title" class="mt-1 text-base font-semibold">
“Apagar” acompanha cada próxima ação sem virar o foco da linha
</h2>
</div>
<p class="hidden max-w-md text-right text-xs leading-5 text-muted-foreground md:block">
Abrir continua outline; Reprocessar continua primário. Apagar é ghost, destrutivo e
separado por respiro.
</p>
</div>
<div class="overflow-x-auto pb-4">
<div
class="scene-shadow mx-auto h-[780px] w-[1280px] overflow-hidden rounded-xl border border-border bg-background"
>
<div class="flex h-full">
<aside
class="flex w-56 shrink-0 flex-col border-r border-sidebar-border bg-sidebar p-3"
>
<div class="flex h-12 items-center gap-2 px-2">
<div
class="grid size-8 place-items-center rounded-lg bg-primary text-sm font-bold text-primary-foreground"
>
S
</div>
<div>
<p class="text-sm font-semibold">Solla</p>
<p class="text-xs text-muted-foreground">Campanha</p>
</div>
</div>
<nav class="mt-4 space-y-1 text-sm" aria-label="Navegação ilustrativa">
<div
class="flex h-9 items-center gap-2 rounded-md bg-sidebar-accent px-3 font-semibold"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m3 11 18-5v12L3 14v-3Z" />
<path d="M11.6 16.9 13 22H7l-1.3-7" />
</svg>
Comunicação
</div>
<div class="ml-4 border-l border-sidebar-border pl-3">
<div
class="mt-1 flex h-9 items-center rounded-md bg-card px-3 font-semibold text-primary ring-1 ring-border"
>
Conteúdos
</div>
</div>
</nav>
<p
class="mt-auto border-t border-sidebar-border px-2 pt-4 text-xs text-muted-foreground"
>
Assessoria de comunicação
</p>
</aside>
<div class="min-w-0 flex-1">
<header class="flex h-16 items-center justify-between border-b border-border px-6">
<div>
<p class="text-xs text-muted-foreground">Comunicação</p>
<p class="text-sm font-medium">Central de Conteúdos</p>
</div>
<div class="size-8 rounded-full bg-secondary ring-1 ring-border"></div>
</header>
<div class="p-6">
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="text-lg font-semibold">Conteúdos</h3>
<p class="mt-1 text-sm text-muted-foreground">
Peças que alimentam a Central pública. Rascunhos não aparecem no site.
</p>
</div>
<div class="flex items-center gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Adicionar por link
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
Enviar peças
</button>
</div>
</div>
<div class="mt-6 flex items-center gap-3">
<div class="relative flex-1">
<svg
aria-hidden="true"
class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<input
readonly
aria-label="Buscar conteúdos"
placeholder="Buscar por título, tema ou cidade…"
class="h-11 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm outline-none placeholder:text-muted-foreground"
/>
</div>
<button
type="button"
class="inline-flex h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Filtros
</button>
</div>
<div class="mt-5 overflow-hidden rounded-xl border border-border">
<table class="w-full table-fixed text-left text-sm">
<caption class="sr-only">
Quatro peças com estados de processamento, publicação, circulação e ações.
</caption>
<thead class="bg-stone-50 text-xs text-muted-foreground">
<tr class="border-b border-border">
<th class="w-[23%] p-3 font-medium">Peça</th>
<th class="w-[14%] p-3 font-medium">Processamento</th>
<th class="w-[12%] p-3 font-medium">Publicação</th>
<th class="w-[25%] p-3 font-medium">Circulação</th>
<th class="w-[26%] p-3 text-right font-medium">Próxima ação</th>
</tr>
</thead>
<tbody class="divide-y divide-border">
<tr>
<td class="p-3 align-middle">
<div class="flex items-center gap-3">
<span
class="grid h-14 w-20 shrink-0 place-items-center rounded-md bg-gradient-to-br from-stone-200 to-stone-100 text-stone-500"
>
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m16 13 5 3-5 3v-6Z" />
<rect x="3" y="6" width="13" height="14" rx="2" />
</svg>
</span>
<div class="min-w-0">
<p class="font-semibold">Peça publicada</p>
<p class="mt-1 truncate text-xs text-muted-foreground">
Vídeo · 02:14
</p>
</div>
</div>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
>Pronto</span
>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
>Publicado</span
>
</td>
<td class="p-3">
<div class="grid grid-cols-2 gap-x-3 gap-y-1 text-xs">
<span class="text-muted-foreground">Visualizações</span
><b class="text-right">—</b>
<span class="text-muted-foreground">Downloads</span
><b class="text-right">—</b>
</div>
</td>
<td class="p-3">
<div class="flex items-center justify-end gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Abrir
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" />
</svg>
Apagar
</button>
</div>
</td>
</tr>
<tr>
<td class="p-3">
<p class="font-semibold">Peça em rascunho</p>
<p class="mt-1 text-xs text-muted-foreground">Card</p>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
>Pronto</span
>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
>Rascunho</span
>
</td>
<td class="p-3">
<span class="text-xs text-muted-foreground">Ainda não publicada</span>
</td>
<td class="p-3">
<div class="flex items-center justify-end gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Abrir
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</td>
</tr>
<tr>
<td class="p-3">
<p class="font-semibold">Peça com falha</p>
<p class="mt-1 text-xs text-muted-foreground">Áudio</p>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700"
>Falhou</span
>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
>Rascunho</span
>
</td>
<td class="p-3">
<span class="text-xs text-muted-foreground">Ainda não publicada</span>
</td>
<td class="p-3">
<div class="flex items-center justify-end gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M20 6v6h-6" />
<path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg
>Reprocessar
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</td>
</tr>
<tr>
<td class="p-3">
<p class="font-semibold">Peça em processamento</p>
<p class="mt-1 text-xs text-muted-foreground">Vídeo enviado</p>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900"
>Processando</span
>
<p class="mt-1 text-xs text-muted-foreground">Transcrevendo…</p>
</td>
<td class="p-3">
<span
class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
>Rascunho</span
>
</td>
<td class="p-3">
<span class="text-xs text-muted-foreground">Ainda não publicada</span>
</td>
<td class="p-3">
<div class="flex items-center justify-end gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Abrir
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium text-destructive hover:bg-red-50"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-3 text-xs text-muted-foreground">4 peças</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CENA B — LISTA MOBILE -->
<section id="lista-mobile" aria-labelledby="lista-mobile-title">
<div class="mb-3">
<p class="text-xs font-medium text-muted-foreground">Cena B · mobile ~390</p>
<h2 id="lista-mobile-title" class="mt-1 text-base font-semibold">
Nos cards, apagar fica ao lado da ação rotineira — nunca acima dela
</h2>
</div>
<div
class="scene-shadow mx-auto w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background"
>
<div
class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground"
>
<button aria-label="Abrir menu" class="grid size-10 place-items-center rounded-lg">
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<span class="text-sm font-semibold">Conteúdos</span>
<div class="size-10"></div>
</div>
<div class="p-4">
<button
type="button"
class="inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
Enviar peças
</button>
<button
type="button"
class="mt-2 inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Adicionar por link
</button>
<input
readonly
aria-label="Buscar conteúdos"
placeholder="Buscar conteúdos…"
class="mt-3 h-11 w-full rounded-md border border-input bg-background px-3 text-base outline-none placeholder:text-muted-foreground"
/>
<div class="mt-4 space-y-3">
<article class="rounded-xl border border-border bg-card p-4">
<div class="flex items-start justify-between gap-3">
<p class="text-sm font-semibold">Peça publicada</p>
<span
class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
>Pronto</span
>
</div>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<span
class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 font-semibold text-rose-900 ring-1 ring-rose-200"
>Publicado</span
><span>Vídeo · 02:14</span>
</div>
<div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
Abrir
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</article>
<article class="rounded-xl border border-border bg-card p-4">
<div class="flex items-start justify-between gap-3">
<p class="text-sm font-semibold">Peça em rascunho</p>
<span
class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
>Pronto</span
>
</div>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<span
class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold"
>Rascunho</span
><span>Card</span>
</div>
<div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
<button
type="button"
class="min-h-11 rounded-lg border border-border text-sm font-medium"
>
Abrir</button
><button
type="button"
class="inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</article>
<article class="rounded-xl border border-border bg-card p-4">
<div class="flex items-start justify-between gap-3">
<p class="text-sm font-semibold">Peça com falha</p>
<span
class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700"
>Falhou</span
>
</div>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
<span
class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 font-semibold"
>Rascunho</span
><span>Áudio</span>
</div>
<button
type="button"
class="mt-3 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M20 6v6h-6" />
<path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg
>Reprocessar
</button>
<button
type="button"
class="mt-2 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</article>
<article class="rounded-xl border border-border bg-card p-4">
<div class="flex items-start justify-between gap-3">
<p class="text-sm font-semibold">Peça em processamento</p>
<span
class="inline-flex min-h-5 shrink-0 items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-900"
>Processando</span
>
</div>
<div class="mt-3 h-2 overflow-hidden rounded-full bg-muted">
<div class="h-full w-1/2 rounded-full bg-primary"></div>
</div>
<p class="mt-2 text-xs text-muted-foreground">Transcrevendo…</p>
<div class="mt-3 grid grid-cols-[1fr_auto] gap-2">
<button
type="button"
class="min-h-11 rounded-lg border border-border text-sm font-medium"
>
Abrir</button
><button
type="button"
class="inline-flex min-h-11 items-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- CENAS C–D — DETALHE DESKTOP E MOBILE -->
<section id="detalhe" aria-labelledby="detalhe-title">
<div class="mb-3 flex items-end justify-between gap-4">
<div>
<p class="text-xs font-medium text-muted-foreground">
Cenas C–D · detalhe desktop e mobile
</p>
<h2 id="detalhe-title" class="mt-1 text-base font-semibold">
A ação definitiva fecha a fila de ações do topo
</h2>
</div>
<p class="hidden max-w-md text-right text-xs leading-5 text-muted-foreground md:block">
Publicar, Despublicar ou Reprocessar preservam seu peso contextual. Anexar é secundário;
Apagar permanece ghost destrutivo.
</p>
</div>
<div class="overflow-x-auto pb-4">
<div
class="scene-shadow mx-auto w-[1280px] overflow-hidden rounded-xl border border-border bg-background"
>
<div class="flex h-16 items-center justify-between border-b border-border px-8">
<div>
<p class="text-xs text-muted-foreground">Comunicação</p>
<p class="text-sm font-medium">Peça publicada</p>
</div>
<div class="size-8 rounded-full bg-secondary ring-1 ring-border"></div>
</div>
<div class="mx-auto max-w-5xl p-8">
<a
href="#"
class="inline-flex min-h-10 items-center gap-1 text-xs font-semibold text-primary"
>
<svg
aria-hidden="true"
class="size-3.5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6" /></svg
>Conteúdos
</a>
<div class="mt-2 flex items-start justify-between gap-5 border-b border-border pb-5">
<div class="min-w-0">
<h3 class="text-xl font-semibold">Peça publicada</h3>
<div class="mt-2 flex gap-2">
<span
class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
>Pronto</span
><span
class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
>Publicado</span
>
</div>
</div>
<div class="flex shrink-0 flex-wrap items-center justify-end gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M13.5 3H12H8C6.9 3 6 3.9 6 5v14c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V8.5L13.5 3Z"
/>
<path d="M13 3v6h6" />
<path d="M12 18v-6" />
<path d="m9 15 3 3 3-3" /></svg
>Anexar
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-3 text-sm font-medium"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 3l18 18" />
<path d="M10.6 10.6A3 3 0 0 0 15 15" />
<path d="M9.9 4.2A10.6 10.6 0 0 1 12 4c5.5 0 10 8 10 8a18 18 0 0 1-2 2.8" />
<path d="M6.6 6.6C3.9 8.4 2 12 2 12s4.5 8 10 8a9.8 9.8 0 0 0 5.4-1.6" /></svg
>Despublicar
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg px-3 text-sm font-medium text-destructive hover:bg-red-50"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
</div>
<div class="mt-6 grid grid-cols-[300px_1fr] gap-8">
<div>
<div
class="grid aspect-video place-items-center rounded-xl border border-border bg-gradient-to-br from-stone-200 to-stone-100 text-xs font-semibold text-muted-foreground"
>
Prévia da peça
</div>
<dl class="mt-4 space-y-2 text-xs">
<div class="flex justify-between">
<dt class="text-muted-foreground">Origem</dt>
<dd>Arquivo</dd>
</div>
<div class="flex justify-between">
<dt class="text-muted-foreground">Duração</dt>
<dd>02:14</dd>
</div>
</dl>
</div>
<div>
<div class="rounded-xl border border-border p-5">
<p class="text-sm font-semibold">Circulação</p>
<div class="mt-4 grid grid-cols-4 gap-3">
<div class="h-16 rounded-lg bg-muted"></div>
<div class="h-16 rounded-lg bg-muted"></div>
<div class="h-16 rounded-lg bg-muted"></div>
<div class="h-16 rounded-lg bg-muted"></div>
</div>
</div>
<div class="mt-6 border-t border-border pt-6">
<div class="h-11 rounded-md border border-input"></div>
<div class="mt-3 h-24 rounded-md border border-input"></div>
</div>
</div>
</div>
<div class="mt-8 grid grid-cols-2 gap-4 border-t border-border pt-6">
<div class="rounded-xl border border-border bg-card p-4">
<p class="text-xs font-semibold">Variante · pronto e rascunho</p>
<div class="mt-3 flex items-center gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center rounded-lg border border-border px-3 text-sm font-medium"
>
Anexar</button
><button
type="button"
class="inline-flex min-h-11 items-center rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
Publicar</button
><button
type="button"
class="inline-flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-destructive"
>
Apagar
</button>
</div>
</div>
<div class="rounded-xl border border-border bg-card p-4">
<p class="text-xs font-semibold">Variante · falhou</p>
<div class="mt-3 flex items-center gap-2">
<button
type="button"
class="inline-flex min-h-11 items-center rounded-lg border border-border px-3 text-sm font-medium"
>
Anexar</button
><button
type="button"
class="inline-flex min-h-11 items-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M20 6v6h-6" />
<path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg
>Reprocessar</button
><button
type="button"
class="inline-flex min-h-11 items-center rounded-lg px-3 text-sm font-medium text-destructive"
>
Apagar
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-8 grid items-start gap-8 lg:grid-cols-2">
<div>
<p class="mb-2 text-center text-xs font-medium text-muted-foreground">
Mobile · publicado
</p>
<div
class="scene-shadow mx-auto w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background"
>
<div
class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground"
>
<button aria-label="Abrir menu" class="grid size-10 place-items-center rounded-lg">
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M4 6h16M4 12h16M4 18h16" />
</svg></button
><span class="max-w-[230px] truncate text-sm font-semibold">Peça publicada</span>
<div class="size-10"></div>
</div>
<div class="p-4">
<a
href="#"
class="inline-flex min-h-11 items-center gap-1 text-xs font-semibold text-primary"
><svg
aria-hidden="true"
class="size-3.5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6" /></svg
>Conteúdos</a
>
<h3 class="mt-1 text-xl font-semibold">Peça publicada</h3>
<div class="mt-2 flex gap-2">
<span
class="inline-flex min-h-5 items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-semibold text-green-800"
>Pronto</span
><span
class="inline-flex min-h-5 items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-900 ring-1 ring-rose-200"
>Publicado</span
>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button
type="button"
class="min-h-11 rounded-lg border border-border text-sm font-medium"
>
Anexar</button
><button
type="button"
class="min-h-11 rounded-lg border border-border text-sm font-medium"
>
Despublicar</button
><button
type="button"
class="col-span-2 inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
</div>
<div
class="mt-5 grid aspect-video place-items-center rounded-xl border border-border bg-gradient-to-br from-stone-200 to-stone-100 text-xs font-semibold text-muted-foreground"
>
Prévia da peça
</div>
<div class="mt-5 h-28 rounded-xl border border-border"></div>
</div>
</div>
</div>
<div>
<p class="mb-2 text-center text-xs font-medium text-muted-foreground">
Mobile · falhou
</p>
<div
class="scene-shadow mx-auto w-full max-w-[390px] overflow-hidden rounded-[28px] border-[6px] border-stone-800 bg-background"
>
<div
class="flex h-14 items-center justify-between bg-primary px-4 text-primary-foreground"
>
<button aria-label="Abrir menu" class="grid size-10 place-items-center rounded-lg">
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M4 6h16M4 12h16M4 18h16" />
</svg></button
><span class="max-w-[230px] truncate text-sm font-semibold">Peça com falha</span>
<div class="size-10"></div>
</div>
<div class="p-4">
<a
href="#"
class="inline-flex min-h-11 items-center gap-1 text-xs font-semibold text-primary"
><svg
aria-hidden="true"
class="size-3.5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="m15 18-6-6 6-6" /></svg
>Conteúdos</a
>
<h3 class="mt-1 text-xl font-semibold">Peça com falha</h3>
<div class="mt-2 flex gap-2">
<span
class="inline-flex min-h-5 items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-semibold text-red-700"
>Falhou</span
><span
class="inline-flex min-h-5 items-center rounded-full bg-muted px-2 py-0.5 text-xs font-semibold text-muted-foreground"
>Rascunho</span
>
</div>
<button
type="button"
class="mt-4 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M20 6v6h-6" />
<path d="M20 12a8 8 0 1 0-2.34 5.66" /></svg
>Reprocessar
</button>
<button
type="button"
class="mt-2 min-h-11 w-full rounded-lg border border-border text-sm font-medium"
>
Anexar
</button>
<button
type="button"
class="mt-2 inline-flex min-h-11 w-full items-center justify-center gap-1.5 rounded-lg text-sm font-medium text-destructive"
>
<svg
aria-hidden="true"
class="size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M3 6h18" />
<path d="M8 6V4h8v2" />
<path d="m19 6-1 14H6L5 6" /></svg
>Apagar
</button>
<div
class="mt-5 grid aspect-video place-items-center rounded-xl border border-border bg-muted text-xs font-semibold text-muted-foreground"
>
Sem prévia disponível
</div>
<div
class="mt-5 rounded-lg border border-red-200 bg-red-50 p-3 text-xs leading-5 text-red-800"
>
O processamento não foi concluído. O arquivo foi preservado.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CENAS E–F — CONFIRMAÇÕES -->
<section id="confirmacoes" aria-labelledby="confirmacoes-title">
<div class="mb-3">
<p class="text-xs font-medium text-muted-foreground">
Cenas E–F · diálogos sempre visíveis
</p>
<h2 id="confirmacoes-title" class="mt-1 text-base font-semibold">
O link público é nomeado somente quando será quebrado
</h2>
</div>
<div class="grid gap-6 lg:grid-cols-2">
<div
class="relative flex min-h-[430px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
>
<div class="absolute inset-0 bg-foreground/35"></div>
<span
class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
>Publicado</span
>
<div
role="dialog"
aria-modal="true"
aria-labelledby="published-title"
class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
>
<div class="flex items-start gap-3">
<div
class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
>
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
<div class="min-w-0">
<h3 id="published-title" class="text-base font-medium">Apagar esta peça?</h3>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
O link público
<span class="font-medium text-foreground">/conteudos/&lt;slug&gt;</span> deixa
de funcionar para quem já recebeu. Esta ação não pode ser desfeita.
</p>
</div>
</div>
<div
class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium"
>
Cancelar
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white"
>
Apagar
</button>
</div>
</div>
</div>
<div
class="relative flex min-h-[430px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
>
<div class="absolute inset-0 bg-foreground/35"></div>
<span
class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
>Rascunho · processando · falhou</span
>
<div
role="dialog"
aria-modal="true"
aria-labelledby="draft-title"
class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
>
<div class="flex items-start gap-3">
<div
class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
>
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
<div class="min-w-0">
<h3 id="draft-title" class="text-base font-medium">Apagar esta peça?</h3>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
Esta ação não pode ser desfeita.
</p>
</div>
</div>
<div
class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium"
>
Cancelar
</button>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white"
>
Apagar
</button>
</div>
</div>
</div>
</div>
</section>
<!-- CENAS G–H — FEEDBACK -->
<section id="feedback" aria-labelledby="feedback-title">
<div class="mb-3">
<p class="text-xs font-medium text-muted-foreground">
Cenas G–H · estados críticos do diálogo
</p>
<h2 id="feedback-title" class="mt-1 text-base font-semibold">
Falha permanece no contexto; envio bloqueia os dois gestos
</h2>
</div>
<div class="grid gap-6 lg:grid-cols-2">
<div
class="relative flex min-h-[470px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
>
<div class="absolute inset-0 bg-foreground/35"></div>
<span
class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
>Erro ao apagar</span
>
<div
role="dialog"
aria-modal="true"
aria-labelledby="error-title"
class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
>
<div class="flex items-start gap-3">
<div
class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
>
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
<div>
<h3 id="error-title" class="text-base font-medium">Apagar esta peça?</h3>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
Esta ação não pode ser desfeita.
</p>
</div>
</div>
<div
role="alert"
class="grid w-full grid-cols-[auto_1fr] gap-x-2 rounded-lg border border-border bg-card px-2.5 py-2 text-left text-destructive"
>
<svg
aria-hidden="true"
class="mt-0.5 size-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
<p class="text-xs">Não foi possível apagar a peça.</p>
</div>
<div
class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
>
<button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium"
>
Cancelar</button
><button
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg bg-destructive px-4 text-sm font-medium text-white"
>
Apagar
</button>
</div>
</div>
</div>
<div
class="relative flex min-h-[470px] items-center justify-center overflow-hidden rounded-xl border border-border bg-stone-200 p-4"
>
<div class="absolute inset-0 bg-foreground/35"></div>
<span
class="absolute left-4 top-4 rounded-full bg-white/90 px-2.5 py-1 text-xs font-medium"
>Enviando</span
>
<div
role="dialog"
aria-modal="true"
aria-labelledby="submitting-title"
class="dialog-shadow relative grid w-full max-w-sm gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10"
>
<div class="flex items-start gap-3">
<div
class="grid size-9 shrink-0 place-items-center rounded-full bg-red-50 text-destructive"
>
<svg
aria-hidden="true"
class="size-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
<div>
<h3 id="submitting-title" class="text-base font-medium">Apagar esta peça?</h3>
<p class="mt-2 text-sm leading-6 text-muted-foreground">
O link público
<span class="font-medium text-foreground">/conteudos/&lt;slug&gt;</span> deixa
de funcionar para quem já recebeu. Esta ação não pode ser desfeita.
</p>
</div>
</div>
<div
class="-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 sm:flex-row sm:justify-end"
>
<button
disabled
type="button"
class="inline-flex min-h-11 items-center justify-center rounded-lg border border-border bg-background px-4 text-sm font-medium opacity-50"
>
Cancelar
</button>
<button
disabled
type="button"
class="inline-flex min-h-11 items-center justify-center gap-1.5 rounded-lg bg-destructive px-4 text-sm font-medium text-white opacity-70"
>
<svg
aria-hidden="true"
class="size-4 animate-spin motion-reduce:animate-none"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg
>Apagar
</button>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>