@govbr-ds/webcomponents 2.1.3 → 2.3.0

package/dist/collection/pages/scripts/pageLoader.js

@@ -4,10 +4,77 @@ const CLEAR_COMPONENTS_FILTER = document.getElementById('clear-components-filter
 
 let renderedFilesContent = {};
 let currentLoadedPath = null;
+let pageLoadGeneration = 0;
+const activeExampleCleanups = new Set();
 const markdownParser = window.marked;
-const DEV_SERVER_CONNECTOR_IFRAME_RE =
-  /<iframe\b[^>]*title=["']Stencil Dev Server Connector[^"']*["'][\s\S]*?<\/iframe>/gi;
 let lzStringPromise;
+const MAX_PLAYGROUND_DRAFT_SIZE = 512 * 1024;
+const DEV_VIEWPORTS = [
+  { id: 'desktop', label: 'Desktop (100%)', icon: 'fas fa-desktop', mode: 'web', width: null, height: null },
+  { id: 'tablet', label: 'Tablet - 768px', icon: 'fas fa-tablet-alt', mode: 'web', width: 768, height: 600 },
+  { id: 'ios', label: 'iPhone (iOS) - 390x844', icon: 'fab fa-apple', mode: 'ios', width: 390, height: 844 },
+  { id: 'android', label: 'Android - 360x800', icon: 'fab fa-android', mode: 'android', width: 360, height: 800 },
+];
+const DEV_PREVIEW_MIN_WIDTH = 200;
+const DEV_PREVIEW_MIN_HEIGHT = 180;
+const DEV_PREVIEW_RESIZE_STEP = 16;
+
+function createPreviewResizeHandle(axis) {
+  const isWidthHandle = axis === 'vertical';
+  const handle = document.createElement('div');
+  handle.className = `wbc-example-preview-resize-handle wbc-example-preview-resize-handle--${axis}`;
+  handle.setAttribute('role', 'separator');
+  handle.setAttribute('tabindex', '0');
+  handle.setAttribute(
+    'aria-label',
+    isWidthHandle ? 'Redimensionar largura do preview' : 'Redimensionar altura do preview',
+  );
+  handle.setAttribute('aria-orientation', axis);
+  const line = document.createElement('span');
+  line.className = 'wbc-example-preview-resize-handle__line';
+  handle.appendChild(line);
+  return handle;
+}
+
+function getPreviewResizeDelta(key, decreaseKey, increaseKey) {
+  if (key === decreaseKey) return -DEV_PREVIEW_RESIZE_STEP;
+  if (key === increaseKey) return DEV_PREVIEW_RESIZE_STEP;
+  return 0;
+}
+
+function getPlaygroundDraftKey(path, file) {
+  return `wbc-playground-draft:${path}/${file}`;
+}
+
+function readPlaygroundDraft(path, file) {
+  try {
+    const raw = window.localStorage.getItem(getPlaygroundDraftKey(path, file));
+    if (!raw || raw.length > MAX_PLAYGROUND_DRAFT_SIZE) return null;
+    const draft = JSON.parse(raw);
+    if (typeof draft?.html !== 'string') return null;
+    return draft;
+  } catch {
+    return null;
+  }
+}
+
+function writePlaygroundDraft(path, file, draft) {
+  try {
+    const serialized = JSON.stringify({ ...draft, updatedAt: Date.now() });
+    if (serialized.length > MAX_PLAYGROUND_DRAFT_SIZE) return false;
+    window.localStorage.setItem(getPlaygroundDraftKey(path, file), serialized);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function getScrollBehavior() {
+  const prefersReducedMotion =
+    (typeof document !== 'undefined' && document.documentElement.dataset.wbcReducedMotion === 'true') ||
+    (typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+  return prefersReducedMotion ? 'auto' : 'smooth';
+}
 
 function loadLzString() {
   if (window.LZString) return Promise.resolve(window.LZString);
@@ -23,6 +90,13 @@ function loadLzString() {
   return lzStringPromise;
 }
 
+function cleanupExamples() {
+  activeExampleCleanups.forEach((cleanup) => {
+    cleanup();
+  });
+  activeExampleCleanups.clear();
+}
+
 // Decode shared state from URL parameters on initialization
 (() => {
   const params = new URLSearchParams(window.location.search);
@@ -53,313 +127,7 @@ function getBaseUrl() {
   return baseUrl === '' ? '' : baseUrl;
 }
 
-function renderExamplePreview(previewElement, source, edgeToEdge = false) {
-  const frame = previewElement.querySelector('iframe');
-  if (!frame) return;
-
-  const baseUrl = getBaseUrl();
-  const componentBundleUrl = new URL(`${baseUrl}/build/webcomponents.esm.js`, window.location.href);
-  componentBundleUrl.searchParams.set('preview-version', String(Date.now()));
-  const componentBundle = componentBundleUrl.href;
-  const frameSource = stripDevServerConnector(source);
-
-  frame.srcdoc = `<!doctype html>
-<html lang="pt-BR">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <base href="${window.location.href}">
-    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/core.min.css`, window.location.href).href}">
-    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/fonts/rawline/400.css`, window.location.href).href}">
-    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/fonts/raleway/wght.css`, window.location.href).href}">
-    <link rel="stylesheet" href="${new URL(`${baseUrl}/assets/fonts/fontawesome/css/all.min.css`, window.location.href).href}">
-    <style>
-      * { font-family: Rawline, Raleway, sans-serif; }
-      html, body { margin: 0; min-height: 1px; overflow: visible; }
-      body { box-sizing: border-box; padding: 24px 16px; }
-      body.wbc-preview-edge-to-edge { padding: 0; }
-      br-cookiebar, br-scrim { inset: 0; position: absolute; pointer-events: none; z-index: 1000; }
-      br-scrim { --scrim-display-mode: parent; }
-    </style>
-  </head>
-  <body${edgeToEdge ? ' class="wbc-preview-edge-to-edge"' : ''}><main data-wbc-preview-content>${frameSource}</main>
-    <script type="module" src="${componentBundle}"></script>
-    <script>
-      (() => {
-        const overlayContentSelector =
-          '[part="open-panel"], [part="default-panel"], [part="body"], .cookiebar-body, .content, .br-modal';
-        const getOverlayHeight = (overlay) => {
-          const measuredHeight = Array.from(overlay.shadowRoot?.querySelectorAll(overlayContentSelector) || []).reduce(
-            (height, element) =>
-              Math.max(height, element.scrollHeight, element.clientHeight, element.getBoundingClientRect().height),
-            0,
-          );
-          if (measuredHeight > 0) return measuredHeight;
-
-          const modal = overlay.matches('br-scrim') ? overlay.querySelector('br-modal') : overlay;
-          return modal?.shadowRoot?.querySelector('.br-modal')?.getBoundingClientRect().height || 0;
-        };
-        const getElementsIncludingShadowRoots = (root = document) => {
-          const elements = [];
-          const visit = (tree) => {
-            tree.querySelectorAll('*').forEach((element) => {
-              elements.push(element);
-              if (element.shadowRoot) visit(element.shadowRoot);
-            });
-          };
-          visit(root);
-          return elements;
-        };
-        const getFloatingHeight = () => {
-          const bodyStyle = getComputedStyle(document.body);
-          const bottomPadding = parseFloat(bodyStyle.paddingBottom) || 0;
-          return getElementsIncludingShadowRoots().reduce((height, element) => {
-            if (element.matches('br-cookiebar, br-scrim, br-modal')) return height;
-            const style = getComputedStyle(element);
-            if (style.position !== 'absolute' && style.position !== 'fixed') return height;
-            if (style.display === 'none' || style.visibility === 'hidden') return height;
-            return Math.max(height, element.getBoundingClientRect().bottom + bottomPadding);
-          }, 0);
-        };
-        const sendHeight = () => {
-          const body = document.body;
-          const bodyStyle = getComputedStyle(body);
-          const overlayHeight = Array.from(document.querySelectorAll('br-cookiebar, br-scrim, br-modal')).reduce(
-            (height, overlay) => Math.max(height, getOverlayHeight(overlay)),
-            0,
-          );
-          const verticalPadding = parseFloat(bodyStyle.paddingTop) + parseFloat(bodyStyle.paddingBottom);
-          const height = Math.ceil(
-            Math.max(
-              body.scrollHeight,
-              body.offsetHeight,
-              body.getBoundingClientRect().height,
-              overlayHeight + verticalPadding,
-              getFloatingHeight(),
-            ),
-          );
-          parent.postMessage({ type: 'wbc-preview-height', height }, '*');
-        };
-        document.querySelectorAll('br-cookiebar, br-scrim').forEach((overlay) => {
-          overlay.setAttribute('data-wbc-preview-contained', '');
-          if (overlay.matches('br-scrim')) overlay.setAttribute('display-mode', 'parent');
-        });
-        const serialize = (value, seen = new WeakSet()) => {
-          if (value instanceof Element) return '<' + value.localName + '>';
-          if (value instanceof Event) return { type: value.type };
-          if (value && typeof value === 'object') {
-            if (seen.has(value)) return '[Circular]';
-            seen.add(value);
-            if (Array.isArray(value)) return value.map((item) => serialize(item, seen));
-            return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, serialize(item, seen)]));
-          }
-          return value;
-        };
-        const sendEvent = (event, dispatchedBy = event.target) => {
-          const target = dispatchedBy instanceof Element ? dispatchedBy : dispatchedBy?.host instanceof Element ? dispatchedBy.host : null;
-          parent.postMessage({
-            type: 'wbc-preview-event',
-            eventType: event.type,
-            custom: event instanceof CustomEvent,
-            detail: event instanceof CustomEvent ? serialize(event.detail) : undefined,
-            target: target ? target.localName + (target.id ? '#' + target.id : '') : 'window',
-          }, '*');
-        };
-        ['change', 'click', 'input', 'submit'].forEach((name) => document.addEventListener(name, sendEvent, true));
-        document.addEventListener('brInternalEvent', sendEvent, true);
-        const originalDispatchEvent = EventTarget.prototype.dispatchEvent;
-        EventTarget.prototype.dispatchEvent = function dispatchEvent(event) {
-          if (event instanceof CustomEvent) sendEvent(event, this);
-          return originalDispatchEvent.call(this, event);
-        };
-        let heightFrame = 0;
-        const scheduleHeight = () => {
-          cancelAnimationFrame(heightFrame);
-          heightFrame = requestAnimationFrame(sendHeight);
-        };
-        const resizeObserver = new ResizeObserver(scheduleHeight);
-        const observeOverlayContent = () => {
-          document.querySelectorAll('br-cookiebar, br-scrim, br-modal').forEach((overlay) => {
-            overlay.shadowRoot?.querySelectorAll(overlayContentSelector).forEach((element) => {
-              resizeObserver.observe(element);
-            });
-          });
-          getElementsIncludingShadowRoots().forEach((element) => {
-            const position = getComputedStyle(element).position;
-            if (position === 'absolute' || position === 'fixed') resizeObserver.observe(element);
-          });
-        };
-        resizeObserver.observe(document.documentElement);
-        resizeObserver.observe(document.body);
-        new MutationObserver(() =>
-          requestAnimationFrame(() => {
-            observeOverlayContent();
-            scheduleHeight();
-          }),
-        ).observe(document.body, { attributes: true, childList: true, subtree: true });
-        Promise.all(
-          [...document.querySelectorAll('*')]
-            .map((element) => element.localName)
-            .filter((tag, index, tags) => tag.includes('-') && tags.indexOf(tag) === index)
-            .map((tag) => customElements.whenDefined(tag)),
-        ).then(() =>
-          requestAnimationFrame(() =>
-            requestAnimationFrame(() => {
-              observeOverlayContent();
-              scheduleHeight();
-            }),
-          ),
-        );
-        addEventListener('load', scheduleHeight);
-        scheduleHeight();
-      })();
-    </script>
-  </body>
-</html>`;
-}
-
-function stripDevServerConnector(source) {
-  return String(source || '')
-    .replace(DEV_SERVER_CONNECTOR_IFRAME_RE, '')
-    .trim();
-}
-
-function getFrameworkCode(source, framework) {
-  const html = String(source || '').trim();
-  const components = Array.from(html.matchAll(/<\/?(br-[a-z0-9-]+)/gi), (match) => match[1]);
-  const imports = [...new Set(components)].map((tag) =>
-    tag
-      .split('-')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join(''),
-  );
-  const importList = imports.length > 0 ? imports.join(', ') : 'BrButton';
-  const pascalMarkup = html.replace(/(<\/?)(br-[a-z0-9-]+)/gi, (_match, prefix, tag) => {
-    return `${prefix}${tag
-      .split('-')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join('')}`;
-  });
-
-  if (framework === 'javascript') {
-    return `import { ${importList} } from '@govbr-ds/webcomponents';\n\nconst example = document.querySelector('${components[0] || 'br-button'}');\n\n// Use o exemplo renderizado para adicionar comportamento com JavaScript.\nconsole.log(example);`;
-  }
-  if (framework === 'css') {
-    return `/* Customize os componentes usando CSS Parts */
-/* Exemplo:
-br-${String(location.pathname).split('/').filter(Boolean).pop() || 'component'}::part(container) {
-  background-color: #f8f9fa;
-}
-*/`;
-  }
-  if (framework === 'angular') {
-    return `import { Component } from '@angular/core';\nimport { ${importList} } from '@govbr-ds/webcomponents-angular/standalone';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [${importList}],\n  template: \`${html.replace(/`/g, '\\`')}\`,\n})\nexport class AppComponent {}`;
-  }
-  if (framework === 'react') {
-    return `import { ${importList} } from '@govbr-ds/webcomponents-react';\n\nexport default function App() {\n  return (\n    <>\n      ${pascalMarkup.replace(/\n/g, '\n      ')}\n    </>\n  );\n}`;
-  }
-  return `<script setup lang="ts">\nimport { ${importList} } from '@govbr-ds/webcomponents-vue';\n</script>\n\n<template>\n  ${pascalMarkup.replace(/\n/g, '\n  ')}\n</template>`;
-}
-
-function getFrameworkFiles(source, framework) {
-  if (framework !== 'angular') return null;
-
-  const html = String(source || '').trim();
-  const components = Array.from(html.matchAll(/<\/?(br-[a-z0-9-]+)/gi), (match) => match[1]);
-  const imports = [...new Set(components)].map((tag) =>
-    tag
-      .split('-')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join(''),
-  );
-  const importList = imports.length > 0 ? imports.join(', ') : 'BrButton';
-
-  return [
-    {
-      filename: 'app.component.ts',
-      language: 'typescript',
-      code: `import { Component } from '@angular/core'\nimport { ${importList} } from '@govbr-ds/webcomponents-angular/standalone'\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [${importList}],\n  templateUrl: './app.component.html',\n})\nexport class AppComponent {}`,
-    },
-    { filename: 'app.component.html', language: 'html', code: html },
-  ];
-}
-
-function createReadOnlyFrameworkTab(label, icon, tabId, source, framework) {
-  const tab = document.createElement('br-tab-item');
-  tab.setAttribute('label', label);
-  tab.setAttribute('icon', icon);
-  tab.setAttribute('icon-only', 'true');
-  tab.setAttribute('title', label);
-  tab.setAttribute('tab-item-id', tabId);
-  tab.dataset.framework = framework;
-
-  const files = getFrameworkFiles(source, framework);
-  tab._frameworkFiles = files;
-
-  if (files?.length > 1) {
-    const fileTabs = document.createElement('div');
-    fileTabs.className = 'wbc-framework-file-tabs';
-    fileTabs.setAttribute('role', 'tablist');
-    files.forEach((file, index) => {
-      const fileTab = document.createElement('button');
-      fileTab.className = `wbc-framework-file-tab${index === 0 ? ' is-active' : ''}`;
-      fileTab.type = 'button';
-      fileTab.dataset.filename = file.filename;
-      fileTab.setAttribute('aria-selected', String(index === 0));
-      fileTab.setAttribute('role', 'tab');
-      fileTab.textContent = file.filename;
-      fileTabs.appendChild(fileTab);
-    });
-    tab.appendChild(fileTabs);
-  }
-
-  const code = document.createElement('pre');
-  code.className = 'wbc-framework-code';
-  code.dataset.framework = framework;
-  code.dataset.filename = files?.[0]?.filename || '';
-  code.textContent = files?.[0]?.code || getFrameworkCode(source, framework);
-  tab.appendChild(code);
-  return tab;
-}
-
-async function getPreviewAxeContext(previewFrame) {
-  const previewDocument = previewFrame.contentDocument;
-  const previewWindow = previewFrame.contentWindow;
-  if (!previewDocument?.body || !previewWindow) {
-    throw new Error('O conteúdo do preview ainda não está disponível.');
-  }
-
-  if (!previewWindow.axe) {
-    const axeScriptUrl = new URL(`${getBaseUrl()}/assets/axe-core.min.js`, window.location.href).href;
-
-    const response = await fetch(axeScriptUrl);
-    if (!response.ok) throw new Error('Não foi possível carregar o Axe-Core no preview.');
-
-    const axeScript = previewDocument.createElement('script');
-    axeScript.textContent = await response.text();
-    previewDocument.head.appendChild(axeScript);
-  }
-
-  const previewContent = previewDocument.querySelector('[data-wbc-preview-content]');
-  if (!previewContent) throw new Error('Não foi possível localizar o conteúdo do exemplo.');
-
-  return { axe: previewWindow.axe, previewContent };
-}
-
-function getExampleHash(file) {
-  return `#${encodeURIComponent(file)}`;
-}
-
-function getRequestedExampleFile() {
-  if (!window.location.hash) return null;
-  try {
-    return decodeURIComponent(window.location.hash.slice(1));
-  } catch {
-    return window.location.hash.slice(1);
-  }
-}
-
-function createExampleElement(path, file, text, isExpanded = false, onOpen) {
+function createExampleElement(path, file, text, presets = [], defaultPreset = '', exampleLabel = '') {
   text = stripDevServerConnector(text);
   const contentDiv = document.createElement('br-item');
   contentDiv.classList.add('file', 'wbc-example');
@@ -367,54 +135,84 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
   contentDiv.dataset.exampleFile = file;
   const controlsScope = `wbc-example-${path}-${file}`.replace(/[^a-zA-Z0-9_-]/g, '-');
   contentDiv.dataset.controlsScope = controlsScope;
+  const previewChannelId = `${controlsScope}-preview`;
 
-  const dropdown = document.createElement('br-dropdown');
-  dropdown.className = 'wbc-example-dropdown';
-  if (isExpanded) dropdown.setAttribute('is-open', '');
+  const exampleAbortController = new AbortController();
   let initializeExample;
   let isInitialized = false;
 
   const preview = document.createElement('div');
   preview.className = 'wbc-example-preview';
+  const previewViewport = document.createElement('div');
+  previewViewport.className = 'wbc-example-preview-viewport';
   let previewFrame;
+  const previewWidthResizeHandle = createPreviewResizeHandle('vertical');
+  const previewHeightResizeHandle = createPreviewResizeHandle('horizontal');
+  let previewResizeState = null;
+  let hasManualPreviewHeight = false;
+  let activeViewport = DEV_VIEWPORTS[0];
+  let darkThemeEnabled = false;
+  let reducedMotionEnabled =
+    typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
   // --- EDITOR CONTAINER ---
   const editorContainer = document.createElement('div');
   editorContainer.className = 'wbc-example-editor-container';
 
+  // Ids nativos das abas, com o escopo do exemplo para não duplicar ids entre exemplos da página.
+  const tabIds = Object.fromEntries(
+    ['code', 'events', 'controls', 'a11y', 'javascript', 'css', 'angular', 'react', 'vue'].map((name) => [
+      name,
+      `${controlsScope}-${name}-tab`,
+    ]),
+  );
   const tabComponent = document.createElement('br-tab');
   tabComponent.setAttribute('density', 'small');
-  tabComponent.setAttribute('active-tab-id', 'code-tab');
+  // Ícones por classe (Font Awesome) em light DOM, pelo slot `icon-{id}` do br-tab.
+  const setTabIcon = (tabItem, iconClass) => {
+    const icon = document.createElement('i');
+    icon.slot = `icon-${tabItem.id}`;
+    icon.className = iconClass;
+    icon.setAttribute('aria-hidden', 'true');
+    tabComponent.appendChild(icon);
+  };
+  tabComponent.setAttribute('active-tab-id', tabIds.code);
+  tabComponent.setAttribute('data-playground-badges', '');
 
   const codeTabItem = document.createElement('br-tab-item');
   codeTabItem.setAttribute('label', 'HTML');
-  codeTabItem.setAttribute('icon', 'fab fa-html5');
   codeTabItem.setAttribute('icon-only', 'true');
-  codeTabItem.setAttribute('title', 'HTML');
-  codeTabItem.setAttribute('tab-item-id', 'code-tab');
+  codeTabItem.setAttribute('title', 'Editor HTML');
+  codeTabItem.id = tabIds.code;
   codeTabItem.setAttribute('active', 'true');
-  codeTabItem.setAttribute('is-active', 'true');
 
   const eventsTabItem = document.createElement('br-tab-item');
   eventsTabItem.setAttribute('label', 'Console');
-  eventsTabItem.setAttribute('icon', 'fas fa-terminal');
   eventsTabItem.setAttribute('icon-only', 'true');
-  eventsTabItem.setAttribute('title', 'Console');
-  eventsTabItem.setAttribute('tab-item-id', 'events-tab');
+  eventsTabItem.setAttribute('title', 'Console: eventos e mensagens de runtime');
+  eventsTabItem.id = tabIds.events;
 
   const controlsTabItem = document.createElement('br-tab-item');
   controlsTabItem.setAttribute('label', 'Controles');
-  controlsTabItem.setAttribute('icon', 'fas fa-sliders-h');
   controlsTabItem.setAttribute('icon-only', 'true');
-  controlsTabItem.setAttribute('title', 'Controles');
-  controlsTabItem.setAttribute('tab-item-id', 'controls-tab');
-
-  const javascriptTabItem = createReadOnlyFrameworkTab('JS', 'fab fa-js', 'javascript-tab', text, 'javascript');
-  const cssTabItem = createReadOnlyFrameworkTab('CSS', 'fab fa-css3-alt', 'css-tab', text, 'css');
-  const angularTabItem = createReadOnlyFrameworkTab('Angular', 'fab fa-angular', 'angular-tab', text, 'angular');
-  const reactTabItem = createReadOnlyFrameworkTab('React', 'fab fa-react', 'react-tab', text, 'react');
-  const vueTabItem = createReadOnlyFrameworkTab('Vue', 'fab fa-vuejs', 'vue-tab', text, 'vue');
+  controlsTabItem.setAttribute('title', 'Controles do componente');
+  controlsTabItem.id = tabIds.controls;
+
+  const javascriptTabItem = createFrameworkTab('JS', 'fab fa-js', tabIds.javascript, text, 'javascript', {
+    editable: true,
+  });
+  const cssTabItem = createFrameworkTab('CSS', 'fab fa-css3-alt', tabIds.css, text, 'css', { editable: true });
+  const angularTabItem = createFrameworkTab('Angular', 'fab fa-angular', tabIds.angular, text, 'angular');
+  const reactTabItem = createFrameworkTab('React', 'fab fa-react', tabIds.react, text, 'react');
+  const vueTabItem = createFrameworkTab('Vue', 'fab fa-vuejs', tabIds.vue, text, 'vue');
   const frameworkTabItems = [javascriptTabItem, cssTabItem, angularTabItem, reactTabItem, vueTabItem];
+  // Depois de os ids estarem definidos: o nome do slot depende do id da aba.
+  setTabIcon(codeTabItem, 'fab fa-html5');
+  setTabIcon(eventsTabItem, 'fas fa-terminal');
+  setTabIcon(controlsTabItem, 'fas fa-sliders-h');
+  frameworkTabItems.forEach((tab) => {
+    setTabIcon(tab, tab.dataset.icon);
+  });
   const frameworkEditors = new Map();
   const refreshFrameworkEditors = () => {
     requestAnimationFrame(() => {
@@ -424,6 +222,7 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
     });
   };
   const getFrameworkEditorLanguage = (framework) => {
+    if (framework === 'javascript') return 'javascript';
     if (framework === 'css') return 'css';
     if (framework === 'angular') return 'typescript';
     if (framework === 'react') return 'tsx';
@@ -478,6 +277,7 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
 
     const button = document.createElement('br-button');
     button.setAttribute('slot', 'trigger');
+    button.setAttribute('type', 'button');
     button.setAttribute('shape', 'circle');
     button.setAttribute('density', 'small');
     button.setAttribute('emphasis', 'secondary');
@@ -499,164 +299,826 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
     return { tooltip, button, icon, tooltipContent };
   };
 
-  const editorState = { value: text };
+  const localDraft =
+    window.SHARED_STATE?.p === path && window.SHARED_STATE?.f === file ? null : readPlaygroundDraft(path, file);
+  const presetOptions = presets;
+  const draftPreset = presetOptions.find(({ id }) => id === localDraft?.presetId);
+  const draftBaseline = typeof localDraft?.baselineHtml === 'string' ? localDraft.baselineHtml : null;
+  const currentDraftBaseline = draftPreset ? getPresetSource(draftPreset) : text;
+  const activeDraft = draftBaseline === currentDraftBaseline ? localDraft : null;
+  const editorState = { value: activeDraft?.html || text };
+  const vanillaSources = {
+    html: editorState.value,
+    css: getFrameworkCode(editorState.value, 'css'),
+    javascript: getFrameworkCode(editorState.value, 'javascript'),
+  };
+  let activeVanillaFile = 'html';
+  let isSwitchingVanillaFile = false;
+  let comparisonBaseline = text;
+  const editorHistory = { entries: [editorState.value], index: 0 };
+  const editorHistoryLimit = 50;
+  let isApplyingEditorValue = false;
+  let controlsApi = null;
+  let isUpdatingFromControls = false;
+  let undoAction;
+  let redoAction;
+  let diffAction;
+  let overflowUndo;
+  let overflowRedo;
+  let overflowDiff;
   let editorApi = null;
-  const getEditorValue = () => editorApi?.getValue() ?? editorState.value;
+  // O editor é compartilhado pelas abas index.html/index.css/index.js; fora da
+  // aba HTML, o HTML vigente é o último valor aplicado.
+  const getEditorValue = () =>
+    activeVanillaFile === 'html' ? (editorApi?.getValue() ?? editorState.value) : editorState.value;
   const refreshEditor = () => {
     requestAnimationFrame(() => requestAnimationFrame(() => editorApi?.refresh?.()));
   };
+  const updateHistoryActions = () => {
+    if (undoAction) undoAction.button.disabled = editorHistory.index === 0;
+    if (redoAction) redoAction.button.disabled = editorHistory.index === editorHistory.entries.length - 1;
+    if (overflowUndo) overflowUndo.item.disabled = editorHistory.index === 0;
+    if (overflowRedo) overflowRedo.item.disabled = editorHistory.index === editorHistory.entries.length - 1;
+  };
+  const recordEditorHistory = (source) => {
+    if (editorHistory.entries[editorHistory.index] === source) return;
+    editorHistory.entries = editorHistory.entries.slice(0, editorHistory.index + 1);
+    editorHistory.entries.push(source);
+    if (editorHistory.entries.length > editorHistoryLimit) editorHistory.entries.shift();
+    editorHistory.index = editorHistory.entries.length - 1;
+  };
+  const moveEditorHistory = (offset) => {
+    const nextIndex = editorHistory.index + offset;
+    if (nextIndex < 0 || nextIndex >= editorHistory.entries.length) return;
+    editorHistory.index = nextIndex;
+    setEditorValue(editorHistory.entries[nextIndex], { recordHistory: false });
+  };
+  const handleEditorKeydown = (event) => {
+    if (!(event.ctrlKey || event.metaKey) || event.altKey) return;
+    const key = event.key.toLowerCase();
+    if (key === 'z') {
+      event.preventDefault();
+      event.stopPropagation();
+      moveEditorHistory(event.shiftKey ? 1 : -1);
+    } else if (key === 'y') {
+      event.preventDefault();
+      event.stopPropagation();
+      moveEditorHistory(1);
+    }
+  };
+
+  undoAction = createActionButton('fas fa-undo', 'Desfazer alteração', 'Desfazer alteração', () =>
+    moveEditorHistory(-1),
+  );
+  redoAction = createActionButton('fas fa-redo', 'Refazer alteração', 'Refazer alteração', () => moveEditorHistory(1));
+  diffAction = createActionButton('fas fa-columns', 'Comparar alterações', 'Comparar alterações', () => {
+    diffPanel.hidden = !diffPanel.hidden;
+  });
+  undoAction.button.setAttribute('aria-keyshortcuts', 'Control+Z Meta+Z');
+  redoAction.button.setAttribute('aria-keyshortcuts', 'Control+Y Meta+Y Control+Shift+Z Meta+Shift+Z');
+  updateHistoryActions();
+  diffAction.button.disabled = true;
+
+  const presetSelect = document.createElement('br-select');
+  presetSelect.className = 'wbc-example-preset';
+  presetSelect.id = `${controlsScope}-preset`;
+  presetSelect.setAttribute('density', 'small');
+  presetSelect.setAttribute('inline', '');
+  presetSelect.setAttribute('label', 'Preset');
+  const initialPreset =
+    presets.find(({ id, source }) => id === activeDraft?.presetId && Boolean(source)) ??
+    presets.find(({ id, source }) => id === defaultPreset && Boolean(source)) ??
+    presets.find(({ source }) => Boolean(source));
+  const initialPresetId = initialPreset?.id || '';
+  const getPresetCss = (preset) => preset?.css || getFrameworkCode(editorState.value, 'css');
+  const getPresetJavascript = (preset) => preset?.javascript || '';
+  // Link compartilhado > rascunho local > arquivos do preset. O estado da URL não é confiável.
+  const sharedState = getSharedExampleState(path, file);
+  const pickSource = (...values) => values.find((value) => typeof value === 'string');
+  vanillaSources.css = pickSource(sharedState?.c, activeDraft?.css, getPresetCss(initialPreset));
+  vanillaSources.javascript = pickSource(sharedState?.j, activeDraft?.javascript, getPresetJavascript(initialPreset));
+  presetOptions.forEach(({ id, label, source }) => {
+    const option = document.createElement('br-select-option');
+    option.value = id;
+    option.setAttribute('label', label);
+    option.textContent = label;
+    if (id === initialPresetId) option.setAttribute('selected', '');
+    if (id && !source) option.setAttribute('disabled', '');
+    presetSelect.appendChild(option);
+  });
+  presetSelect.value = initialPresetId;
+
+  // Descrição do preset: linha de largura total entre o cabeçalho e o preview e, se houver,
+  // a explicação detalhada em <details>, recolhida a cada troca de preset. O parágrafo é uma
+  // região viva, então a troca é anunciada.
+  const presetDescription = document.createElement('div');
+  presetDescription.className = 'wbc-example-preset-description';
+  presetDescription.hidden = true;
+  const presetDescriptionText = document.createElement('p');
+  presetDescriptionText.className = 'wbc-example-preset-description__text';
+  presetDescriptionText.setAttribute('aria-live', 'polite');
+  const presetDetails = document.createElement('details');
+  presetDetails.className = 'wbc-example-preset-description__details';
+  const presetDetailsSummary = document.createElement('summary');
+  presetDetailsSummary.textContent = 'Explicação detalhada';
+  const presetDetailsBody = document.createElement('div');
+  presetDetailsBody.className = 'wbc-example-preset-description__body';
+  presetDetails.append(presetDetailsSummary, presetDetailsBody);
+  presetDescription.append(presetDescriptionText, presetDetails);
+  const updatePresetDescription = (preset) => {
+    presetDescription.hidden = !preset?.description;
+    presetDescriptionText.textContent = preset?.description ?? '';
+    presetDetails.open = false;
+    presetDetails.hidden = !preset?.details;
+    presetDetailsBody.textContent = preset?.details ?? '';
+  };
+  updatePresetDescription(initialPreset);
+
+  let isApplyingPresetFromUrl = false;
+  let title;
+  const updateExampleLabel = (presetId = presetSelect.value) => {
+    const selectedPreset = presetId ? presetOptions.find(({ id }) => id === presetId) : null;
+    if (title) title.textContent = selectedPreset?.label || exampleLabel || file;
+  };
+  if (initialPreset?.source) comparisonBaseline = initialPreset.source;
+  presetSelect.addEventListener('change', () => {
+    const selectedPreset = presetOptions.find(({ id }) => id === presetSelect.value);
+    updateExampleLabel(selectedPreset?.id);
+    updatePresetDescription(selectedPreset);
+    if (selectedPreset?.source) {
+      controlsCssSource = '';
+      controlsApi?.reset?.();
+      if (!isApplyingPresetFromUrl) updatePresetUrl(file, selectedPreset.id);
+      comparisonBaseline = selectedPreset.source;
+      vanillaSources.css = getPresetCss(selectedPreset);
+      vanillaSources.javascript = getPresetJavascript(selectedPreset);
+      activateVanillaFile('html');
+      // Presets com o mesmo HTML ainda podem trocar JS/CSS.
+      if (selectedPreset.source === editorState.value) {
+        renderCurrentPreview(editorState.value);
+        persistDraft();
+      } else setEditorValue(selectedPreset.source);
+      updateDiff(getEditorValue());
+    }
+  });
+  contentDiv._applyPresetFromUrl = (presetId) => {
+    const selectedPreset =
+      presetOptions.find(({ id, source }) => id === presetId && source) ||
+      presetOptions.find(({ id, source }) => id === contentDiv.dataset.defaultPreset && source) ||
+      presetOptions.find(({ source }) => source);
+    if (!selectedPreset || presetSelect.value === selectedPreset.id) {
+      updateExampleLabel(selectedPreset?.id);
+      return;
+    }
+
+    isApplyingPresetFromUrl = true;
+    presetSelect.value = selectedPreset.id;
+    presetSelect.dispatchEvent(new Event('change'));
+    isApplyingPresetFromUrl = false;
+  };
+  const hasPresets = presets.length > 0;
+  presetSelect.hidden = !hasPresets;
 
   // 1. Copy Action
-  const copyAction = createActionButton('fas fa-copy', 'Copiar código', 'Copiar código', async () => {
-    try {
-      if (navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(getEditorValue());
-      } else {
-        const fallback = document.createElement('textarea');
-        fallback.value = getEditorValue();
-        fallback.setAttribute('readonly', '');
-        fallback.style.position = 'fixed';
-        fallback.style.opacity = '0';
-        document.body.appendChild(fallback);
-        fallback.select();
-        document.execCommand('copy');
-        fallback.remove();
+  const getCopyText = (target) => {
+    const source = getEditorValue();
+    if (target === 'vanilla') {
+      vanillaSources.html = source;
+      return `<!-- index.html -->\n${vanillaSources.html}\n\n/* index.css */\n${vanillaSources.css}\n\n// index.js\n${vanillaSources.javascript}`;
+    }
+    const files = getFrameworkFiles(source, target);
+    if (files?.length) {
+      return files
+        .map(
+          (file) => `${file.language === 'html' ? `<!-- ${file.filename} -->` : `// ${file.filename}`}\n${file.code}`,
+        )
+        .join('\n\n');
+    }
+    return getFrameworkCode(source, target);
+  };
+  const copyText = async (target) => {
+    const value = getCopyText(target);
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(value);
+    } else {
+      const fallback = document.createElement('textarea');
+      fallback.value = value;
+      fallback.setAttribute('readonly', '');
+      fallback.className = 'wbc-copy-fallback';
+      document.body.appendChild(fallback);
+      fallback.select();
+      document.execCommand('copy');
+      fallback.remove();
+    }
+  };
+  const copyMenu = document.createElement('div');
+  copyMenu.className = 'wbc-copy-menu';
+  copyMenu.setAttribute('role', 'menu');
+  copyMenu.setAttribute('aria-label', 'Formato para copiar');
+  copyMenu.hidden = true;
+  const copyOptions = [
+    ['vanilla', 'HTML/CSS/JS'],
+    ['angular', 'Angular'],
+    ['react', 'React'],
+    ['vue', 'Vue'],
+  ];
+  let copyAction;
+  copyAction = createActionButton('fas fa-copy', 'Escolher formato para copiar', 'Copiar código', () => {
+    copyMenu.hidden = !copyMenu.hidden;
+    copyAction.button.setAttribute('aria-haspopup', 'menu');
+    copyAction.button.setAttribute('aria-expanded', String(!copyMenu.hidden));
+  });
+  copyAction.button.setAttribute('aria-haspopup', 'menu');
+  copyAction.button.setAttribute('aria-expanded', 'false');
+  copyOptions.forEach(([target, label]) => {
+    const option = document.createElement('button');
+    option.type = 'button';
+    option.setAttribute('role', 'menuitem');
+    option.textContent = label;
+    option.addEventListener('click', async () => {
+      try {
+        await copyText(target);
+        copyAction.icon.className = 'fas fa-check text-success';
+        copyAction.tooltipContent.textContent = 'Copiado!';
+      } catch {
+        copyAction.tooltipContent.textContent = 'Erro ao copiar';
       }
-      copyAction.icon.className = 'fas fa-check text-success';
-      copyAction.tooltipContent.textContent = 'Copiado!';
-    } catch {
-      copyAction.tooltipContent.textContent = 'Erro ao copiar';
+      copyMenu.hidden = true;
+      copyAction.button.setAttribute('aria-expanded', 'false');
+      setTimeout(() => {
+        copyAction.icon.className = 'fas fa-copy';
+        copyAction.tooltipContent.textContent = 'Escolher formato para copiar';
+      }, 2000);
+    });
+    copyMenu.appendChild(option);
+  });
+  const copyMenuContainer = document.createElement('div');
+  copyMenuContainer.className = 'wbc-copy-menu-container';
+  copyMenuContainer.append(copyAction.tooltip, copyMenu);
+  copyMenuContainer.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      copyMenu.hidden = true;
+      copyAction.button.setAttribute('aria-expanded', 'false');
     }
-    setTimeout(() => {
-      copyAction.icon.className = 'fas fa-copy';
-      copyAction.tooltipContent.textContent = 'Copiar código';
-    }, 2000);
   });
 
-  // 2. Share Action
+  const setPreviewReducedMotion = (value) => {
+    reducedMotionEnabled = Boolean(value);
+    contentDiv.setAttribute('data-wbc-reduced-motion', String(reducedMotionEnabled));
+    reducedMotionAction.button.setAttribute('aria-pressed', String(reducedMotionEnabled));
+    reducedMotionAction.button.classList.toggle('wbc-reduced-motion-action--active', reducedMotionEnabled);
+    reducedMotionAction.tooltipContent.textContent = reducedMotionEnabled
+      ? 'Desativar movimento reduzido'
+      : 'Ativar movimento reduzido';
+    if (previewFrame?.contentWindow) {
+      previewFrame.contentWindow.postMessage(
+        {
+          // biome-ignore lint/style/useNamingConvention: nome reservado do protocolo interno de postMessage.
+          __playgroundMode: 'reduced-motion',
+          value: reducedMotionEnabled,
+          // biome-ignore lint/style/useNamingConvention: nome reservado do protocolo interno de postMessage.
+          __playgroundChannelId: previewChannelId,
+        },
+        '*',
+      );
+    }
+  };
+  const reducedMotionAction = createActionButton(
+    'fas fa-running',
+    reducedMotionEnabled ? 'Desativar movimento reduzido' : 'Ativar movimento reduzido',
+    reducedMotionEnabled ? 'Desativar movimento reduzido' : 'Ativar movimento reduzido',
+    () => setPreviewReducedMotion(!reducedMotionEnabled),
+  );
+  reducedMotionAction.button.classList.add('wbc-reduced-motion-action');
+  reducedMotionAction.button.classList.toggle('wbc-reduced-motion-action--active', reducedMotionEnabled);
+  reducedMotionAction.button.setAttribute('aria-pressed', String(reducedMotionEnabled));
+
+  const setPreviewTheme = (dark) => {
+    darkThemeEnabled = Boolean(dark);
+    preview.style.background = darkThemeEnabled ? '#071d41' : '#fff';
+    themeAction.button.setAttribute('aria-pressed', String(darkThemeEnabled));
+    themeAction.button.classList.toggle('wbc-theme-action--active', darkThemeEnabled);
+    themeAction.tooltipContent.textContent = darkThemeEnabled ? 'Usar fundo claro' : 'Usar fundo escuro';
+    previewFrame?.contentWindow?.postMessage(
+      {
+        // biome-ignore lint/style/useNamingConvention: nome reservado do protocolo interno de postMessage.
+        __playgroundMode: 'dark',
+        value: darkThemeEnabled,
+        // biome-ignore lint/style/useNamingConvention: nome reservado do protocolo interno de postMessage.
+        __playgroundChannelId: previewChannelId,
+      },
+      '*',
+    );
+  };
+  const themeAction = createActionButton('fas fa-adjust', 'Usar fundo escuro', 'Mudar fundo', () =>
+    setPreviewTheme(!darkThemeEnabled),
+  );
+  themeAction.button.classList.add('wbc-theme-action');
+  themeAction.button.setAttribute('aria-pressed', 'false');
+
+  const getPreviewFrameSize = () => {
+    const frameRect = previewFrame?.getBoundingClientRect();
+    const viewportRect = previewViewport.getBoundingClientRect();
+    return {
+      width: Math.round(viewportRect.width || frameRect?.width || preview.clientWidth || DEV_PREVIEW_MIN_WIDTH),
+      height: Math.round(frameRect?.height || viewportRect.height || preview.clientHeight || DEV_PREVIEW_MIN_HEIGHT),
+    };
+  };
+
+  const getMaxPreviewWidth = () =>
+    Math.max(DEV_PREVIEW_MIN_WIDTH, Math.round(preview.clientWidth || preview.getBoundingClientRect().width));
+
+  const getMaxPreviewHeight = () => Math.max(DEV_PREVIEW_MIN_HEIGHT, Math.round(window.innerHeight * 0.75));
+
+  const updatePreviewResizeA11y = () => {
+    const { width, height } = getPreviewFrameSize();
+    previewWidthResizeHandle.setAttribute('aria-valuemin', String(DEV_PREVIEW_MIN_WIDTH));
+    previewWidthResizeHandle.setAttribute('aria-valuemax', String(Math.max(width, getMaxPreviewWidth())));
+    previewWidthResizeHandle.setAttribute('aria-valuenow', String(width));
+    previewHeightResizeHandle.setAttribute('aria-valuemin', String(DEV_PREVIEW_MIN_HEIGHT));
+    previewHeightResizeHandle.setAttribute('aria-valuemax', String(Math.max(height, getMaxPreviewHeight())));
+    previewHeightResizeHandle.setAttribute('aria-valuenow', String(height));
+  };
+
+  const updatePreviewWidth = (width, maximumWidth = getMaxPreviewWidth()) => {
+    if (!previewFrame) return;
+    const currentWidth = getPreviewFrameSize().width;
+    const maxWidth = Math.max(currentWidth, maximumWidth);
+    const nextWidth = Math.min(Math.max(Math.round(width), DEV_PREVIEW_MIN_WIDTH), maxWidth);
+    previewViewport.style.width = `${nextWidth}px`;
+    previewViewport.style.maxWidth = 'none';
+    updatePreviewResizeA11y();
+  };
+
+  const updatePreviewHeight = (height) => {
+    if (!previewFrame) return;
+    const currentHeight = getPreviewFrameSize().height;
+    const maxHeight = Math.max(currentHeight, getMaxPreviewHeight());
+    const nextHeight = Math.min(Math.max(Math.round(height), DEV_PREVIEW_MIN_HEIGHT), maxHeight);
+    previewFrame.style.height = `${nextHeight}px`;
+    previewFrame.style.maxHeight = 'none';
+    hasManualPreviewHeight = true;
+    updatePreviewResizeA11y();
+  };
+
+  const stopPreviewResize = () => {
+    previewResizeState = null;
+    preview.classList.remove('is-resizing');
+    previewWidthResizeHandle.classList.remove('is-active');
+    previewHeightResizeHandle.classList.remove('is-active');
+    window.removeEventListener('mousemove', handlePreviewResizeMove);
+    window.removeEventListener('mouseup', stopPreviewResize);
+  };
+
+  const handlePreviewResizeMove = (event) => {
+    if (previewResizeState?.axis === 'vertical') {
+      updatePreviewWidth(
+        previewResizeState.width + event.clientX - previewResizeState.clientX,
+        previewResizeState.maximumWidth,
+      );
+    } else if (previewResizeState?.axis === 'horizontal') {
+      updatePreviewHeight(previewResizeState.height + event.clientY - previewResizeState.clientY);
+    }
+  };
+
+  const startPreviewResize = (axis, event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    stopPreviewResize();
+    const { width, height } = getPreviewFrameSize();
+    const previewRect = preview.getBoundingClientRect();
+    const viewportRect = previewViewport.getBoundingClientRect();
+    const viewportLeft = Math.max(0, Math.round(viewportRect.left - previewRect.left + preview.scrollLeft));
+    const maximumWidth = Math.max(DEV_PREVIEW_MIN_WIDTH, preview.clientWidth - viewportLeft);
+    previewResizeState = { axis, clientX: event.clientX, clientY: event.clientY, width, height, maximumWidth };
+    if (axis === 'vertical') {
+      previewViewport.style.margin = '0';
+      previewViewport.style.marginLeft = `${viewportLeft}px`;
+    }
+    preview.classList.add('is-resizing');
+    (axis === 'vertical' ? previewWidthResizeHandle : previewHeightResizeHandle).classList.add('is-active');
+    window.addEventListener('mousemove', handlePreviewResizeMove);
+    window.addEventListener('mouseup', stopPreviewResize);
+  };
+
+  const handlePreviewResizeKeydown = (axis, event) => {
+    const { width, height } = getPreviewFrameSize();
+
+    if (axis === 'vertical') {
+      const delta = getPreviewResizeDelta(event.key, 'ArrowLeft', 'ArrowRight');
+      if (!delta) return;
+      event.preventDefault();
+      updatePreviewWidth(width + delta);
+      return;
+    }
+
+    const delta = getPreviewResizeDelta(event.key, 'ArrowUp', 'ArrowDown');
+    if (delta) {
+      event.preventDefault();
+      updatePreviewHeight(height + delta);
+    }
+  };
+
+  previewWidthResizeHandle.addEventListener('mousedown', (event) => startPreviewResize('vertical', event));
+  previewWidthResizeHandle.addEventListener('keydown', (event) => handlePreviewResizeKeydown('vertical', event));
+  previewHeightResizeHandle.addEventListener('mousedown', (event) => startPreviewResize('horizontal', event));
+  previewHeightResizeHandle.addEventListener('keydown', (event) => handlePreviewResizeKeydown('horizontal', event));
+  window.addEventListener('resize', updatePreviewResizeA11y, { signal: exampleAbortController.signal });
+  exampleAbortController.signal.addEventListener('abort', stopPreviewResize, { once: true });
+
+  const setViewport = (viewport) => {
+    activeViewport = viewport;
+    hasManualPreviewHeight = false;
+    stopPreviewResize();
+    const deviceMode = viewport.mode ?? 'web';
+    previewViewport.classList.toggle('wbc-example-preview-viewport--device', deviceMode !== 'web');
+    previewViewport.classList.toggle('wbc-example-preview-viewport--ios', deviceMode === 'ios');
+    previewViewport.classList.toggle('wbc-example-preview-viewport--android', deviceMode === 'android');
+    if (!previewFrame) return;
+
+    if (!viewport.width) {
+      preview.classList.remove('wbc-example-preview--viewport');
+      preview.style.removeProperty('max-height');
+      preview.style.removeProperty('overflow');
+      previewFrame.style.removeProperty('width');
+      previewFrame.style.removeProperty('height');
+      previewFrame.style.removeProperty('max-height');
+      previewFrame.style.removeProperty('max-width');
+      previewFrame.style.removeProperty('margin');
+      previewViewport.style.removeProperty('width');
+      previewViewport.style.removeProperty('max-width');
+      previewViewport.style.removeProperty('margin');
+      previewViewport.style.removeProperty('margin-left');
+      updatePreviewResizeA11y();
+      return;
+    }
+
+    preview.classList.add('wbc-example-preview--viewport');
+    preview.style.maxHeight = '75vh';
+    preview.style.overflow = 'auto';
+    previewViewport.style.width = `${viewport.width}px`;
+    previewViewport.style.maxWidth = 'none';
+    previewViewport.style.removeProperty('margin-left');
+    previewViewport.style.margin = '0 auto';
+    previewFrame.style.width = '100%';
+    previewFrame.style.height = `${viewport.height}px`;
+    previewFrame.style.maxWidth = 'none';
+    previewFrame.style.maxHeight = 'none';
+    previewFrame.style.removeProperty('margin');
+    updatePreviewResizeA11y();
+  };
+  const viewportActions = DEV_VIEWPORTS.map((viewport) => {
+    const action = createActionButton(viewport.icon, viewport.label, viewport.label, () => {
+      setViewport(viewport);
+      viewportActions.forEach(({ viewport: item, action: itemAction }) => {
+        itemAction.button.classList.toggle('wbc-viewport-action--active', item.id === viewport.id);
+      });
+    });
+    action.viewport = viewport;
+    action.button.classList.add('wbc-viewport-action');
+    action.button.classList.toggle('wbc-viewport-action--active', viewport.id === activeViewport.id);
+    return { viewport, action };
+  });
+
+  let overflowShare;
+  const handleShare = async () => {
+    try {
+      await loadLzString();
+    } catch {
+      alert('Biblioteca de compartilhamento não carregada.');
+      return;
+    }
+    const state = {
+      p: path,
+      f: file,
+      h: getEditorValue(),
+      j: vanillaSources.javascript,
+      c: vanillaSources.css,
+      // Mantém a associação do código compartilhado ao preset para links legados e edição posterior.
+      presetId: presetSelect.value || undefined,
+    };
+    try {
+      const json = JSON.stringify(state);
+      const encoded = window.LZString.compressToEncodedURIComponent(json);
+      const url = new URL(window.location.href);
+      url.searchParams.set('pg_state', encoded);
+      url.hash = getExampleHash(file, presetSelect.value || undefined);
+
+      await navigator.clipboard.writeText(url.toString());
+
+      shareAction.icon.className = 'fas fa-check text-success';
+      shareAction.tooltipContent.textContent = 'Link copiado!';
+      if (overflowShare) {
+        overflowShare.iconEl.className = 'fas fa-check text-success';
+        overflowShare.textEl.textContent = 'Link copiado!';
+      }
+      setTimeout(() => {
+        shareAction.icon.className = 'fas fa-share-alt';
+        shareAction.tooltipContent.textContent = 'Compartilhar exemplo';
+        if (overflowShare) {
+          overflowShare.iconEl.className = 'fas fa-share-alt';
+          overflowShare.textEl.textContent = 'Compartilhar exemplo';
+        }
+      }, 2000);
+    } catch (err) {
+      console.error(err);
+      shareAction.tooltipContent.textContent = 'Erro ao compartilhar';
+      if (overflowShare) overflowShare.textEl.textContent = 'Erro ao compartilhar';
+      setTimeout(() => {
+        shareAction.icon.className = 'fas fa-share-alt';
+        shareAction.tooltipContent.textContent = 'Compartilhar exemplo';
+        if (overflowShare) {
+          overflowShare.iconEl.className = 'fas fa-share-alt';
+          overflowShare.textEl.textContent = 'Compartilhar exemplo';
+        }
+      }, 2000);
+    }
+  };
+
   const shareAction = createActionButton(
     'fas fa-share-alt',
     'Compartilhar exemplo',
     'Compartilhar exemplo',
-    async () => {
-      try {
-        await loadLzString();
-      } catch {
-        alert('Biblioteca de compartilhamento não carregada.');
-        return;
-      }
-      const state = {
-        p: path,
-        f: file,
-        h: getEditorValue(),
-      };
-      try {
-        const json = JSON.stringify(state);
-        const encoded = window.LZString.compressToEncodedURIComponent(json);
-        const url = new URL(window.location.href);
-        url.searchParams.set('pg_state', encoded);
-        url.hash = getExampleHash(file);
-
-        await navigator.clipboard.writeText(url.toString());
-
-        shareAction.icon.className = 'fas fa-check text-success';
-        shareAction.tooltipContent.textContent = 'Link copiado!';
-        setTimeout(() => {
-          shareAction.icon.className = 'fas fa-share-alt';
-          shareAction.tooltipContent.textContent = 'Compartilhar exemplo';
-        }, 2000);
-      } catch (err) {
-        console.error(err);
-        shareAction.tooltipContent.textContent = 'Erro ao compartilhar';
-        setTimeout(() => {
-          shareAction.icon.className = 'fas fa-share-alt';
-          shareAction.tooltipContent.textContent = 'Compartilhar exemplo';
-        }, 2000);
-      }
-    },
+    handleShare,
   );
 
   // 3. Fullscreen Action
+  let isClosingFullscreen = false;
+  const closeFullscreen = () => {
+    if (!contentDiv.classList.contains('is-fullscreen') || isClosingFullscreen) return;
+    isClosingFullscreen = true;
+    contentDiv.classList.add('is-fullscreen-exiting');
+    setTimeout(() => {
+      contentDiv.classList.remove('is-fullscreen');
+      contentDiv.classList.remove('is-fullscreen-exiting');
+      isClosingFullscreen = false;
+      fsAction.icon.className = 'fas fa-expand-arrows-alt';
+      fsAction.tooltipContent.textContent = 'Tela cheia';
+      fsAction.button.focus();
+    }, 200);
+  };
+
   const fsAction = createActionButton('fas fa-expand-arrows-alt', 'Tela cheia', 'Tela cheia', () => {
-    const isFullscreen = contentDiv.classList.toggle('is-fullscreen');
-    if (isFullscreen) {
+    if (contentDiv.classList.contains('is-fullscreen')) {
+      closeFullscreen();
+    } else {
+      contentDiv.classList.add('is-fullscreen');
       fsAction.icon.className = 'fas fa-compress-arrows-alt';
       fsAction.tooltipContent.textContent = 'Fechar tela cheia';
       requestAnimationFrame(() => editorApi?.refresh?.());
-    } else {
-      fsAction.icon.className = 'fas fa-expand-arrows-alt';
-      fsAction.tooltipContent.textContent = 'Tela cheia';
     }
   });
+  document.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.key !== 'Escape' || !contentDiv.classList.contains('is-fullscreen')) return;
+      event.preventDefault();
+      closeFullscreen();
+    },
+    { signal: exampleAbortController.signal },
+  );
 
   // --- EXAMPLE CARD HEADER ---
   const header = document.createElement('div');
   header.className = 'wbc-example-header';
 
-  const title = document.createElement('h3');
-  title.textContent = file;
+  title = document.createElement('h3');
+  updateExampleLabel();
   header.appendChild(title);
 
-  // Group all actions and toggle on the right
+  // Group actions: expanded toolbar vs compact dropdown
   const headerActions = document.createElement('div');
   headerActions.className = 'wbc-example-header-actions';
 
-  const exampleToggleTooltip = document.createElement('br-tooltip');
-  exampleToggleTooltip.setAttribute('position', 'bottom');
+  const expandedActions = document.createElement('div');
+  expandedActions.className = 'wbc-example-header-actions-expanded';
+  expandedActions.append(
+    undoAction.tooltip,
+    redoAction.tooltip,
+    diffAction.tooltip,
+    ...viewportActions.map(({ action }) => action.tooltip),
+    copyMenuContainer,
+    reducedMotionAction.tooltip,
+    shareAction.tooltip,
+    themeAction.tooltip,
+  );
+
+  // Overflow container for compact toolbar
+  const overflowContainer = document.createElement('div');
+  overflowContainer.className = 'wbc-toolbar-overflow-container';
 
-  const exampleToggle = document.createElement('br-button');
-  exampleToggle.className = 'wbc-example-toggle';
-  exampleToggle.setAttribute('density', 'small');
-  exampleToggle.setAttribute('emphasis', 'secondary');
-  exampleToggle.setAttribute('shape', 'circle');
-  exampleToggle.setAttribute('aria-label', isExpanded ? 'Recolher exemplo' : 'Expandir exemplo');
-  exampleToggle.setAttribute('slot', 'trigger');
+  const overflowMenu = document.createElement('div');
+  overflowMenu.className = 'wbc-toolbar-overflow-menu';
+  overflowMenu.setAttribute('role', 'menu');
+  overflowMenu.setAttribute('aria-label', 'Mais opções');
+  overflowMenu.hidden = true;
 
-  const exampleIcon = document.createElement('i');
-  exampleIcon.className = `fas fa-chevron-${isExpanded ? 'up' : 'down'}`;
-  exampleToggle.appendChild(exampleIcon);
+  const closeOverflow = () => {
+    overflowMenu.hidden = true;
+    overflowAction.button.setAttribute('aria-expanded', 'false');
+    overflowAction.button.classList.remove('wbc-toolbar-overflow-action--active');
+  };
 
-  const exampleToggleTooltipContent = document.createElement('div');
-  exampleToggleTooltipContent.setAttribute('slot', 'content');
-  exampleToggleTooltipContent.setAttribute('position', 'bottom');
-  exampleToggleTooltipContent.textContent = isExpanded ? 'Recolher exemplo' : 'Expandir exemplo';
+  const createOverflowItem = ({ icon, label, onClick, isCheckbox = false }) => {
+    const item = document.createElement('button');
+    item.type = 'button';
+    item.className = 'wbc-toolbar-overflow-menu-item';
+    item.setAttribute('role', isCheckbox ? 'menuitemcheckbox' : 'menuitem');
 
-  exampleToggleTooltip.append(exampleToggle, exampleToggleTooltipContent);
+    const iconEl = document.createElement('i');
+    iconEl.className = icon;
+    iconEl.setAttribute('aria-hidden', 'true');
 
-  header.setAttribute('slot', 'trigger');
-  header.addEventListener('click', (event) => {
-    if (event.target.closest('.wbc-example-header-actions') && !event.target.closest('.wbc-example-toggle')) {
-      event.stopPropagation();
+    const textEl = document.createElement('span');
+    textEl.textContent = label;
+
+    item.append(iconEl, textEl);
+    item.addEventListener('click', (event) => {
+      onClick(event);
+      closeOverflow();
+    });
+    return { item, iconEl, textEl };
+  };
+
+  overflowUndo = createOverflowItem({
+    icon: 'fas fa-undo',
+    label: 'Desfazer alteração',
+    onClick: () => moveEditorHistory(-1),
+  });
+
+  overflowRedo = createOverflowItem({
+    icon: 'fas fa-redo',
+    label: 'Refazer alteração',
+    onClick: () => moveEditorHistory(1),
+  });
+
+  overflowDiff = createOverflowItem({
+    icon: 'fas fa-columns',
+    label: 'Comparar alterações',
+    onClick: () => {
+      diffPanel.hidden = !diffPanel.hidden;
+    },
+  });
+
+  const overflowCopy = createOverflowItem({
+    icon: 'fas fa-copy',
+    label: 'Copiar código',
+    onClick: async () => {
+      await copyText('vanilla');
+    },
+  });
+
+  const overflowViewports = DEV_VIEWPORTS.map((viewport) =>
+    createOverflowItem({
+      icon: viewport.icon,
+      label: viewport.label,
+      onClick: () => {
+        setViewport(viewport);
+        viewportActions.forEach(({ viewport: item, action: itemAction }) => {
+          itemAction.button.classList.toggle('wbc-viewport-action--active', item.id === viewport.id);
+        });
+      },
+    }),
+  );
+
+  const overflowReducedMotion = createOverflowItem({
+    icon: 'fas fa-running',
+    label: `Movimento reduzido (${reducedMotionEnabled ? 'Ativo' : 'Inativo'})`,
+    isCheckbox: true,
+    onClick: () => setPreviewReducedMotion(!reducedMotionEnabled),
+  });
+
+  overflowShare = createOverflowItem({
+    icon: 'fas fa-share-alt',
+    label: 'Compartilhar exemplo',
+    onClick: () => handleShare(),
+  });
+
+  const overflowTheme = createOverflowItem({
+    icon: 'fas fa-adjust',
+    label: `Alternar fundo (${darkThemeEnabled ? 'Escuro' : 'Claro'})`,
+    onClick: () => setPreviewTheme(!darkThemeEnabled),
+  });
+
+  const updateOverflowMenu = () => {
+    overflowUndo.item.disabled = undoAction.button.disabled;
+    overflowRedo.item.disabled = redoAction.button.disabled;
+    overflowDiff.item.disabled = diffAction.button.disabled;
+    DEV_VIEWPORTS.forEach((viewport, index) => {
+      overflowViewports[index].item.classList.toggle('is-active', viewport.id === activeViewport.id);
+    });
+    overflowReducedMotion.item.classList.toggle('is-active', reducedMotionEnabled);
+    overflowReducedMotion.item.setAttribute('aria-checked', String(reducedMotionEnabled));
+    overflowReducedMotion.textEl.textContent = `Movimento reduzido (${reducedMotionEnabled ? 'Ativo' : 'Inativo'})`;
+    overflowTheme.item.classList.toggle('is-active', darkThemeEnabled);
+    overflowTheme.textEl.textContent = `Alternar fundo (${darkThemeEnabled ? 'Escuro' : 'Claro'})`;
+  };
+
+  overflowMenu.append(
+    overflowUndo.item,
+    overflowRedo.item,
+    overflowDiff.item,
+    overflowCopy.item,
+    ...overflowViewports.map(({ item }) => item),
+    overflowReducedMotion.item,
+    overflowShare.item,
+    overflowTheme.item,
+  );
+
+  const overflowAction = createActionButton('fas fa-ellipsis-v', 'Mais opções', 'Mais opções', () => {
+    const isHidden = !overflowMenu.hidden;
+    if (isHidden) {
+      closeOverflow();
+    } else {
+      updateOverflowMenu();
+      overflowMenu.hidden = false;
+      overflowAction.button.setAttribute('aria-expanded', 'true');
+      overflowAction.button.classList.add('wbc-toolbar-overflow-action--active');
     }
   });
+  overflowAction.button.classList.add('wbc-toolbar-overflow-action');
+  overflowAction.button.setAttribute('aria-haspopup', 'menu');
+  overflowAction.button.setAttribute('aria-expanded', 'false');
 
-  const updateExampleToggle = (open) => {
-    exampleIcon.className = `fas fa-chevron-${open ? 'up' : 'down'}`;
-    exampleToggle.setAttribute('aria-label', open ? 'Recolher exemplo' : 'Expandir exemplo');
-    exampleToggleTooltipContent.textContent = open ? 'Recolher exemplo' : 'Expandir exemplo';
-    if (open) requestAnimationFrame(() => editorApi?.refresh?.());
-  };
-
-  dropdown.addEventListener('brDropdownOpenChange', (event) => {
-    const open = event.detail.open;
-    updateExampleToggle(open);
-    if (open) {
-      if (!isInitialized) {
-        dropdown.append(preview, fullscreenBottomPanel);
-        initializeExample?.();
-        isInitialized = true;
-      }
-      onOpen?.(file, contentDiv);
-    } else if (window.location.hash === getExampleHash(file)) {
-      window.history.replaceState({}, '', `${window.location.pathname}${window.location.search}`);
+  overflowContainer.append(overflowAction.tooltip, overflowMenu);
+
+  const handleOverflowOutsideClick = (event) => {
+    if (!overflowContainer.contains(event.target)) {
+      closeOverflow();
+    }
+  };
+  document.addEventListener('click', handleOverflowOutsideClick);
+  exampleAbortController.signal.addEventListener(
+    'abort',
+    () => {
+      document.removeEventListener('click', handleOverflowOutsideClick);
+    },
+    { once: true },
+  );
+
+  overflowContainer.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      closeOverflow();
+      overflowAction.button.focus();
     }
   });
 
-  headerActions.append(copyAction.tooltip, shareAction.tooltip, fsAction.tooltip, exampleToggleTooltip);
+  const collapsedActions = document.createElement('div');
+  collapsedActions.className = 'wbc-example-header-actions-collapsed';
+  collapsedActions.append(overflowContainer);
+
+  headerActions.append(presetSelect, expandedActions, collapsedActions, fsAction.tooltip);
   header.appendChild(headerActions);
 
+  const updateToolbarLayout = () => {
+    const isCompact = header.clientWidth > 0 && header.clientWidth < 840;
+    header.classList.toggle('is-compact-toolbar', isCompact);
+    header.classList.toggle('is-stacked-toolbar', header.clientWidth > 0 && header.clientWidth < 576);
+  };
+  const headerResizeObserver = new ResizeObserver(updateToolbarLayout);
+  headerResizeObserver.observe(header);
+  exampleAbortController.signal.addEventListener('abort', () => headerResizeObserver.disconnect(), { once: true });
+
   const editorWrapper = document.createElement('div');
   editorWrapper.className = 'wbc-example-editor-wrapper';
+  editorWrapper.addEventListener('keydown', handleEditorKeydown, true);
+
+  const diffPanel = document.createElement('section');
+  diffPanel.className = 'wbc-example-diff';
+  diffPanel.hidden = true;
+  diffPanel.setAttribute('aria-label', 'Diff das alterações do exemplo');
+  const diffTitle = document.createElement('h4');
+  diffTitle.className = 'wbc-example-diff__title';
+  diffTitle.textContent = 'Alterações (formatação ignorada)';
+  const diffCode = document.createElement('pre');
+  diffCode.className = 'wbc-example-diff__code';
+  diffPanel.append(diffTitle, diffCode);
+
+  const renderDiff = (diff) => {
+    const fragment = document.createDocumentFragment();
+    diff.lines.forEach((line) => {
+      const lineElement = document.createElement('span');
+      lineElement.className = 'wbc-example-diff__line';
+      if (line.startsWith('---') || line.startsWith('+++')) lineElement.classList.add('is-header');
+      else if (line.startsWith('+')) lineElement.classList.add('is-added');
+      else if (line.startsWith('-')) lineElement.classList.add('is-removed');
+      else if (line.startsWith('@')) lineElement.classList.add('is-hunk');
+      lineElement.textContent = line || ' ';
+      fragment.appendChild(lineElement);
+    });
+    diffCode.replaceChildren(fragment);
+  };
+  const updateDiff = (source) => {
+    const diff = window.WBCPlaygroundCore?.createUnifiedDiff(comparisonBaseline, source) || {
+      changed: source !== comparisonBaseline,
+      lines: source === comparisonBaseline ? [] : [`- ${comparisonBaseline}`, `+ ${source}`],
+    };
+    const hasChanges = diff.changed;
+    diffAction.button.disabled = !hasChanges;
+    if (overflowDiff) overflowDiff.item.disabled = !hasChanges;
+    if (!hasChanges) diffPanel.hidden = true;
+    renderDiff(diff);
+  };
 
   const eventsWrapper = document.createElement('div');
   eventsWrapper.className = 'wbc-example-events-wrapper';
@@ -666,34 +1128,57 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
 
   const filterContainer = document.createElement('div');
   filterContainer.className = 'wbc-events-filter-container';
-  filterContainer.style.display = 'flex';
-  filterContainer.style.gap = '8px';
-  filterContainer.style.alignItems = 'flex-end';
-  filterContainer.style.marginBottom = '8px';
 
   const eventFilterInput = document.createElement('br-input');
+  eventFilterInput.className = 'wbc-events-filter-input';
   eventFilterInput.setAttribute('placeholder', 'Filtrar eventos...');
   eventFilterInput.setAttribute('density', 'small');
-  eventFilterInput.style.flex = '1';
+  const eventKindFilter = document.createElement('select');
+  eventKindFilter.className = 'wbc-event-kind-filter';
+  eventKindFilter.setAttribute('aria-label', 'Tipo de evento');
+  [
+    ['all', 'Todos'],
+    ['native', 'Nativos'],
+    ['custom', 'Customizados'],
+    ['component', 'Por componente'],
+  ].forEach(([value, label]) => {
+    eventKindFilter.add(new Option(label, value));
+  });
 
   const copyEventsAction = createActionButton(
     'fas fa-copy',
-    'Copiar lista de eventos',
-    'Copiar lista de eventos',
+    'Exportar eventos capturados',
+    'Exportar eventos capturados',
     async () => {
-      const visibleItems = Array.from(eventsList.querySelectorAll('li')).filter((li) => li.style.display !== 'none');
-      const textToCopy = visibleItems
-        .map((li) => {
-          const name = li.querySelector('.wbc-event-console-event-name').textContent;
-          const target = li.querySelector('.wbc-event-console-target').textContent;
-          const payload = li.querySelector('.wbc-event-console-detail')?.textContent || '';
-          return `${name}${target}${payload ? `\nPayload: ${payload}` : ''}`;
+      const filter = String(eventFilterInput.value ?? '').toLowerCase();
+      const kind = eventKindFilter.value;
+      const textToCopy = eventEntries
+        .filter((entry) => {
+          const kindMatches =
+            kind === 'all' ||
+            (kind === 'native' && !entry.custom) ||
+            (kind === 'custom' && entry.custom) ||
+            (kind === 'component' && /br-[a-z0-9-]+/i.test(`${entry.target} ${entry.currentTarget || ''}`));
+          return (
+            kindMatches &&
+            `${entry.eventType} ${entry.target} ${entry.currentTarget || ''}`.toLowerCase().includes(filter)
+          );
         })
+        .map((entry) => serialize(entry))
         .join('\n---\n');
 
       try {
         if (navigator.clipboard?.writeText) {
           await navigator.clipboard.writeText(textToCopy);
+        } else {
+          const fallback = document.createElement('textarea');
+          fallback.value = textToCopy;
+          fallback.setAttribute('readonly', '');
+          fallback.className = 'wbc-copy-fallback';
+          document.body.appendChild(fallback);
+          fallback.select();
+          document.execCommand('copy');
+          fallback.remove();
         }
         copyEventsAction.icon.className = 'fas fa-check text-success';
         copyEventsAction.tooltipContent.textContent = 'Copiado!';
@@ -702,28 +1187,28 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
       }
       setTimeout(() => {
         copyEventsAction.icon.className = 'fas fa-copy';
-        copyEventsAction.tooltipContent.textContent = 'Copiar lista de eventos';
+        copyEventsAction.tooltipContent.textContent = 'Exportar eventos capturados';
       }, 2000);
     },
   );
 
-  filterContainer.append(eventFilterInput, copyEventsAction.tooltip);
+  filterContainer.append(eventFilterInput, eventKindFilter, copyEventsAction.tooltip);
 
   const eventsHelp = document.createElement('p');
   eventsHelp.className = 'wbc-events-help';
-  eventsHelp.textContent = 'Eventos emitidos pelo componente aparecem abaixo.';
+  eventsHelp.textContent = 'Eventos e mensagens de runtime do preview aparecem abaixo.';
 
   const eventsActions = document.createElement('div');
   eventsActions.className = 'wbc-events-actions';
-  eventsActions.style.display = 'flex';
-  eventsActions.style.gap = '5px';
 
   const pauseBtn = document.createElement('br-button');
+  pauseBtn.setAttribute('type', 'button');
   pauseBtn.setAttribute('density', 'small');
   pauseBtn.setAttribute('emphasis', 'secondary');
   pauseBtn.textContent = 'Pausar';
 
   const clearBtn = document.createElement('br-button');
+  clearBtn.setAttribute('type', 'button');
   clearBtn.setAttribute('density', 'small');
   clearBtn.setAttribute('emphasis', 'secondary');
   clearBtn.textContent = 'Limpar';
@@ -736,31 +1221,47 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
 
   eventsWrapper.append(eventsHeader, eventsList);
 
+  const eventEntries = [];
+  let eventCounter = 0;
+
   const applyFilter = () => {
     const val = String(eventFilterInput.value ?? '').toLowerCase();
+    const kind = eventKindFilter.value;
     Array.from(eventsList.children).forEach((li) => {
       const text = li.textContent.toLowerCase();
-      li.style.display = text.includes(val) ? '' : 'none';
+      const kindMatches =
+        kind === 'all' ||
+        li.dataset.eventKind === kind ||
+        (kind === 'component' && /br-[a-z0-9-]+/i.test(li.dataset.eventTarget || ''));
+      li.hidden = !kindMatches || !text.includes(val);
     });
   };
 
   eventFilterInput.addEventListener('input', applyFilter);
-  eventFilterInput.addEventListener('valueChange', applyFilter);
+  eventKindFilter.addEventListener('change', applyFilter);
 
   let newEventsCount = 0;
   let isPaused = false;
+  const updateConsoleCounter = () => {
+    const count = eventEntries.length + runtimeEntries.length;
+    if (count > 0) eventsTabItem.setAttribute('counter', count > 99 ? '99+' : String(count));
+    else eventsTabItem.removeAttribute('counter');
+  };
+
+  const markConsoleEntry = () => {
+    const isActive = tabComponent.activeTabId === tabIds.events;
+    if (!isActive) {
+      newEventsCount++;
+      eventsTabItem.setAttribute('label', `Console (${newEventsCount})`);
+    }
+    updateConsoleCounter();
+  };
 
   pauseBtn.addEventListener('click', () => {
     isPaused = !isPaused;
     pauseBtn.textContent = isPaused ? 'Continuar' : 'Pausar';
   });
 
-  clearBtn.addEventListener('click', () => {
-    eventsList.replaceChildren();
-    eventsTabItem.setAttribute('label', 'Console');
-    newEventsCount = 0;
-  });
-
   const serialize = (value) => {
     if (value === undefined) return '';
     try {
@@ -789,97 +1290,306 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
     return `${target.localName}${id}${classes}`;
   };
 
-  const addEventEntry = (event, dispatchedBy, targetDescription) => {
-    if (isPaused) return;
+  const createEventEntry = (event, dispatchedBy, targetDescription, metadata = {}) => {
+    eventCounter += 1;
+    return {
+      id: metadata.eventId || `event-${eventCounter}`,
+      eventType: metadata.eventType || event.type,
+      custom: Boolean(metadata.custom || event instanceof CustomEvent),
+      detail: metadata.detail ?? (event instanceof CustomEvent ? event.detail : undefined),
+      target: metadata.target || targetDescription || describeTarget(event.target || dispatchedBy),
+      currentTarget: metadata.currentTarget,
+      composedPath: metadata.composedPath || [],
+      bubbles: metadata.bubbles ?? Boolean(event.bubbles),
+      composed: metadata.composed ?? Boolean(event.composed),
+      cancelable: metadata.cancelable ?? Boolean(event.cancelable),
+      timeStamp: metadata.timeStamp ?? event.timeStamp,
+    };
+  };
+
+  const createEventDetails = (detail) => {
+    const detailsEl = document.createElement('details');
+    detailsEl.className = 'wbc-event-console-details-container';
+    detailsEl.open = true;
+
+    const summaryEl = document.createElement('summary');
+    summaryEl.textContent = 'Detalhes do evento';
 
+    const preEl = document.createElement('pre');
+    preEl.className = 'wbc-event-console-detail';
+    preEl.textContent = serialize(detail);
+    detailsEl.append(summaryEl, preEl);
+    return detailsEl;
+  };
+
+  const createEventMetadata = (eventEntry) => {
+    const metadataEl = document.createElement('dl');
+    metadataEl.className = 'wbc-event-console-metadata';
+    const metadataRows = [
+      ['target', eventEntry.target],
+      ['currentTarget', eventEntry.currentTarget || '—'],
+      ['bubbles', eventEntry.bubbles],
+      ['composed', eventEntry.composed],
+      ['cancelable', eventEntry.cancelable],
+    ];
+    metadataRows.forEach(([label, value]) => {
+      const term = document.createElement('dt');
+      term.textContent = `${label}:`;
+      const description = document.createElement('dd');
+      description.textContent = String(value);
+      metadataEl.append(term, description);
+    });
+    return metadataEl;
+  };
+
+  const createEventItem = (eventEntry) => {
     const item = document.createElement('li');
     const name = document.createElement('span');
     const target = document.createElement('span');
 
     name.className = 'wbc-event-console-event-name';
-    name.textContent = event.type;
+    name.textContent = `${eventEntry.eventType}${eventEntry.custom ? ' (customizado)' : ''}`;
     target.className = 'wbc-event-console-target';
-    target.textContent = ` — ${targetDescription || describeTarget(event.target || dispatchedBy)}`;
+    target.textContent = ` — ${eventEntry.target}`;
+    item.dataset.eventKind = eventEntry.custom ? 'custom' : 'native';
+    item.dataset.eventTarget = eventEntry.target;
     item.append(name, target);
 
-    if (event instanceof CustomEvent && event.detail !== undefined && event.detail !== null) {
-      const detailsEl = document.createElement('details');
-      detailsEl.className = 'wbc-event-console-details-container';
-
-      const summaryEl = document.createElement('summary');
-      summaryEl.textContent = 'payload';
-
-      const preEl = document.createElement('pre');
-      preEl.className = 'wbc-event-console-detail';
-      preEl.textContent = serialize(event.detail);
-
-      detailsEl.append(summaryEl, preEl);
-      item.appendChild(detailsEl);
+    if (eventEntry.detail !== undefined && eventEntry.detail !== null) {
+      item.appendChild(createEventDetails(eventEntry.detail));
     }
 
-    eventsList.prepend(item);
-    applyFilter(); // Garante que novos eventos respeitem o filtro atual
+    item.appendChild(createEventMetadata(eventEntry));
+    if (eventEntry.composedPath.length > 0) {
+      const pathEl = document.createElement('small');
+      pathEl.className = 'wbc-event-console-path';
+      pathEl.textContent = `path=${eventEntry.composedPath.join(' → ')}`;
+      item.appendChild(pathEl);
+    }
+    return item;
+  };
 
+  const trimEventsList = () => {
     const maxEntries = 100;
     while (eventsList.children.length > maxEntries) {
       eventsList.lastElementChild?.remove();
     }
+  };
 
-    const isActive = eventsTabItem.getAttribute('is-active') === 'true';
-    if (!isActive) {
-      newEventsCount++;
-      eventsTabItem.setAttribute('label', `Console (${newEventsCount})`);
+  const addEventEntry = (event, dispatchedBy, targetDescription, metadata = {}) => {
+    if (isPaused) return;
+
+    const eventEntry = createEventEntry(event, dispatchedBy, targetDescription, metadata);
+    eventEntries.push(eventEntry);
+    if (eventEntries.length > 100) eventEntries.shift();
+    eventsList.prepend(createEventItem(eventEntry));
+    applyFilter(); // Garante que novos eventos respeitem o filtro atual
+    trimEventsList();
+
+    markConsoleEntry();
+  };
+
+  const runtimeEntries = [];
+  const createRuntimeEntryItem = (entry) => {
+    const item = document.createElement('li');
+    item.className = `wbc-runtime-entry wbc-runtime-entry--${entry.type}`;
+    item.dataset.eventKind = 'runtime';
+    item.dataset.eventTarget = entry.source || '';
+    const heading = document.createElement('strong');
+    heading.textContent = entry.type;
+    item.appendChild(heading);
+    if (entry.source) {
+      const source = document.createElement('code');
+      source.textContent = ` ${entry.source}${entry.line ? `:${entry.line}${entry.column ? `:${entry.column}` : ''}` : ''}`;
+      item.appendChild(source);
     }
+    const body = document.createElement('span');
+    body.textContent = ` ${(entry.args || []).map((value) => (typeof value === 'string' ? value : serialize(value))).join(' ')}`;
+    item.appendChild(body);
+    return item;
+  };
+
+  const addRuntimeEntry = (entry) => {
+    if (isPaused) return;
+    runtimeEntries.push(entry);
+    if (runtimeEntries.length > 100) runtimeEntries.shift();
+    eventsList.prepend(createRuntimeEntryItem(entry));
+    applyFilter();
+    trimEventsList();
+    markConsoleEntry();
   };
+  const clearConsole = () => {
+    eventsList.replaceChildren();
+    eventEntries.length = 0;
+    runtimeEntries.length = 0;
+    eventsTabItem.setAttribute('label', 'Console');
+    eventsTabItem.removeAttribute('counter');
+    newEventsCount = 0;
+  };
+  clearBtn.addEventListener('click', clearConsole);
 
   window.WBCActiveRecorders = window.WBCActiveRecorders || [];
   const recorder = {
     preview,
     addEvent: addEventEntry,
   };
-  window.addEventListener('message', (event) => {
-    if (!previewFrame || event.source !== previewFrame.contentWindow || !event.data?.type?.startsWith('wbc-preview-'))
+
+  const applyPreviewHeight = (height) => {
+    if (activeViewport.width || hasManualPreviewHeight) return;
+    const maxHeight = contentDiv.classList.contains('is-fullscreen') ? Infinity : window.innerHeight * 0.75;
+    const targetHeight = Math.max(1, Math.min(height, maxHeight));
+    const currentHeight = parseFloat(previewFrame.style.height) || 0;
+    if (Math.abs(targetHeight - currentHeight) > 1) {
+      previewFrame.style.height = `${targetHeight}px`;
+      updatePreviewResizeA11y();
+    }
+  };
+
+  const isPreviewMessage = (event) =>
+    previewFrame &&
+    event.source === previewFrame.contentWindow &&
+    event.data?.__playgroundChannelId === previewChannelId &&
+    event.data?.type?.startsWith('wbc-preview-');
+
+  const handlePreviewEventMessage = (data) => {
+    const bridgedEvent = data.custom
+      ? new CustomEvent(data.eventType, {
+          detail: data.detail,
+          bubbles: data.bubbles,
+          composed: data.composed,
+          cancelable: data.cancelable,
+        })
+      : new Event(data.eventType, {
+          bubbles: data.bubbles,
+          composed: data.composed,
+          cancelable: data.cancelable,
+        });
+    addEventEntry(bridgedEvent, previewFrame, data.target, data);
+  };
+
+  const handlePreviewRuntimeMessage = (data) => {
+    const runtimeTypes = ['log', 'warning', 'error', 'exception', 'unhandledrejection', 'component'];
+    const runtimeType = runtimeTypes.includes(data.runtimeType) ? data.runtimeType : 'log';
+    addRuntimeEntry({
+      id: data.id,
+      type: runtimeType,
+      args: data.args || [],
+      source: data.source,
+      line: data.line,
+      column: data.column,
+      message: data.message,
+    });
+  };
+
+  const handlePreviewMessage = (event) => {
+    if (!isPreviewMessage(event)) return;
+    if (event.data.type === 'wbc-preview-exit-fullscreen') {
+      closeFullscreen();
       return;
+    }
     if (event.data.type === 'wbc-preview-height') {
-      const maxHeight = contentDiv.classList.contains('is-fullscreen') ? Infinity : window.innerHeight * 0.75;
-      previewFrame.style.height = `${Math.max(1, Math.min(event.data.height, maxHeight))}px`;
-    } else if (event.data.type === 'wbc-preview-event') {
-      const bridgedEvent = event.data.custom
-        ? new CustomEvent(event.data.eventType, { detail: event.data.detail })
-        : new Event(event.data.eventType);
-      addEventEntry(bridgedEvent, previewFrame, event.data.target);
+      applyPreviewHeight(event.data.height);
+      return;
     }
-  });
+    if (event.data.type === 'wbc-preview-event') {
+      handlePreviewEventMessage(event.data);
+      return;
+    }
+    if (event.data.type === 'wbc-preview-runtime') {
+      handlePreviewRuntimeMessage(event.data);
+    }
+  };
+
+  window.addEventListener('message', handlePreviewMessage, { signal: exampleAbortController.signal });
+  recorder.cleanup = () => {
+    exampleAbortController.abort();
+    recorder.cleanupNativeEvents?.();
+    const recorderIndex = window.WBCActiveRecorders?.indexOf(recorder) ?? -1;
+    if (recorderIndex >= 0) window.WBCActiveRecorders.splice(recorderIndex, 1);
+  };
   window.WBCActiveRecorders.push(recorder);
   window.WBCRegisterNativeEventRecorder?.(recorder);
+  activeExampleCleanups.add(recorder.cleanup);
+
+  let runAccessibilityAudit;
+  let accessibilityAuditTimer;
+  const scheduleAccessibilityAudit = () => {
+    window.clearTimeout(accessibilityAuditTimer);
+    accessibilityAuditTimer = window.setTimeout(() => runAccessibilityAudit?.(), 650);
+  };
+
+  let vanillaFileTabs;
+  function activateVanillaFile(target) {
+    if (target === activeVanillaFile) return;
+    activeVanillaFile = target;
+    vanillaFileTabs?.querySelectorAll('.wbc-framework-file-tab').forEach((item) => {
+      const active = item.dataset.vanillaFile === target;
+      item.classList.toggle('is-active', active);
+      item.setAttribute('aria-selected', String(active));
+    });
+    if (!editorApi) return;
+    isSwitchingVanillaFile = true;
+    editorApi.setLanguage?.(target);
+    editorApi.setValue(vanillaSources[target]);
+    isSwitchingVanillaFile = false;
+  }
 
-  const setEditorValue = (value) => {
-    editorState.value = value;
-    editorApi?.setValue(value);
-    applyEditorValue(value);
+  const setEditorValue = (value, { recordHistory = true } = {}) => {
+    const nextValue = String(value ?? '');
+    if (nextValue === editorState.value) return;
+    activateVanillaFile('html');
+    isApplyingEditorValue = true;
+    editorApi?.setValue(nextValue);
+    isApplyingEditorValue = false;
+    applyEditorValue(nextValue, { recordHistory });
   };
 
   tabComponent.addEventListener('brTabChange', (event) => {
     const activeTabId = event.detail.tabId;
-    if (activeTabId !== 'code-tab') {
+    if (activeTabId !== tabIds.code) {
       eventsTabItem.setAttribute('label', 'Console');
       newEventsCount = 0;
     }
-    if (frameworkTabItems.some((tab) => tab.getAttribute('tab-item-id') === activeTabId)) {
+    if (frameworkTabItems.some((tab) => tab.id === activeTabId)) {
       refreshFrameworkEditors();
     }
   });
 
-  codeTabItem.appendChild(editorWrapper);
+  vanillaFileTabs = document.createElement('div');
+  vanillaFileTabs.className = 'wbc-framework-file-tabs wbc-vanilla-file-tabs';
+  vanillaFileTabs.setAttribute('role', 'tablist');
+  vanillaFileTabs.setAttribute('aria-label', 'Arquivos HTML/CSS/JS');
+  const vanillaFiles = [
+    ['html', 'index.html'],
+    ['css', 'index.css'],
+    ['javascript', 'index.js'],
+  ];
+  vanillaFiles.forEach(([target, filename], index) => {
+    const fileTab = document.createElement('button');
+    fileTab.className = `wbc-framework-file-tab${index === 0 ? ' is-active' : ''}`;
+    fileTab.type = 'button';
+    fileTab.setAttribute('role', 'tab');
+    fileTab.setAttribute('aria-selected', String(index === 0));
+    fileTab.textContent = filename;
+    fileTab.dataset.vanillaFile = target;
+    fileTab.addEventListener('click', () => {
+      if (target === activeVanillaFile) return;
+      activateVanillaFile(target);
+      refreshEditor();
+    });
+    vanillaFileTabs.appendChild(fileTab);
+  });
+
+  codeTabItem.append(vanillaFileTabs, editorWrapper, diffPanel);
   eventsTabItem.appendChild(eventsWrapper);
 
   // --- ACCESSIBILITY TAB ---
   const a11yTabItem = document.createElement('br-tab-item');
   a11yTabItem.setAttribute('label', 'Acessibilidade');
-  a11yTabItem.setAttribute('icon', 'fas fa-universal-access');
   a11yTabItem.setAttribute('icon-only', 'true');
-  a11yTabItem.setAttribute('title', 'Acessibilidade');
-  a11yTabItem.setAttribute('tab-item-id', 'a11y-tab');
+  a11yTabItem.setAttribute('title', 'Auditoria de acessibilidade');
+  a11yTabItem.id = tabIds.a11y;
+  setTabIcon(a11yTabItem, 'fas fa-universal-access');
 
   const a11yWrapper = document.createElement('div');
   a11yWrapper.className = 'wbc-example-a11y-wrapper';
@@ -899,25 +1609,32 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
   a11yWrapper.append(a11yHeader, a11yResults);
   a11yTabItem.appendChild(a11yWrapper);
 
-  const runAccessibilityAudit = async () => {
-    if (!window.axe) {
-      a11yResults.innerHTML =
-        '<p class="text-danger mt-3">Axe-Core não está carregado. Verifique a conexão ou recarregue a página.</p>';
-      return;
+  const showA11yMessage = (className, message, iconClass) => {
+    const paragraph = document.createElement('p');
+    paragraph.className = className;
+    if (iconClass) {
+      const icon = document.createElement('i');
+      icon.className = `${iconClass} mr-2`;
+      icon.setAttribute('aria-hidden', 'true');
+      paragraph.appendChild(icon);
     }
+    paragraph.appendChild(document.createTextNode(message));
+    a11yResults.replaceChildren(paragraph);
+  };
 
-    a11yResults.innerHTML =
-      '<p class="mt-3"><i class="fas fa-spinner fa-spin mr-2"></i>Analisando acessibilidade...</p>';
+  runAccessibilityAudit = async () => {
+    showA11yMessage('mt-3', 'Analisando acessibilidade...', 'fas fa-spinner fa-spin');
 
     try {
       const { axe, previewContent } = await getPreviewAxeContext(previewFrame);
       const results = await axe.run(previewContent);
 
       if (results.violations.length === 0) {
-        a11yResults.innerHTML =
-          '<p class="text-success mt-3"><i class="fas fa-check-circle mr-2"></i>Nenhum problema de acessibilidade detectado!</p>';
+        a11yTabItem.removeAttribute('counter');
+        showA11yMessage('text-success mt-3', 'Nenhum problema de acessibilidade detectado!', 'fas fa-check-circle');
       } else {
-        a11yResults.innerHTML = '';
+        a11yTabItem.setAttribute('counter', String(results.violations.length));
+        a11yResults.replaceChildren();
 
         const violationsList = document.createElement('ul');
         violationsList.className = 'wbc-a11y-violations-list mt-3';
@@ -934,7 +1651,8 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
           impactBadge.textContent = violation.impact;
 
           const helpText = document.createElement('span');
-          helpText.innerHTML = `<strong>${violation.help}</strong>`;
+          helpText.textContent = violation.help;
+          helpText.style.fontWeight = '700';
 
           title.append(helpText, impactBadge);
 
@@ -955,21 +1673,23 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
         a11yResults.appendChild(violationsList);
       }
     } catch (err) {
+      a11yTabItem.setAttribute('counter', '1');
       console.error(err);
-      a11yResults.innerHTML = `<p class="text-danger mt-3">Erro ao executar a análise: ${err.message}</p>`;
+      showA11yMessage(
+        'text-danger mt-3',
+        `Erro ao executar a análise: ${err instanceof Error ? err.message : String(err)}`,
+      );
     }
   };
 
   tabComponent.addEventListener('brTabChange', (event) => {
-    if (event.detail.tabId === 'a11y-tab') runAccessibilityAudit();
-    if (event.detail.tabId === 'code-tab') refreshEditor();
+    if (event.detail.tabId === tabIds.a11y) runAccessibilityAudit();
+    if (event.detail.tabId === tabIds.code) refreshEditor();
   });
 
   tabComponent.append(
     codeTabItem,
     controlsTabItem,
-    javascriptTabItem,
-    cssTabItem,
     eventsTabItem,
     angularTabItem,
     reactTabItem,
@@ -979,27 +1699,76 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
   editorContainer.append(tabComponent);
 
   let controlsCssSource = '';
+  let vanillaAssetsPreviewTimer;
+  const persistDraft = () => {
+    writePlaygroundDraft(path, file, {
+      html: editorState.value,
+      css: vanillaSources.css,
+      javascript: vanillaSources.javascript,
+      baselineHtml: comparisonBaseline,
+      presetId: presetSelect.value || undefined,
+    });
+  };
   const renderCurrentPreview = (source) => {
     const managedStyle = controlsCssSource ? `<style data-playground-controls-css>${controlsCssSource}</style>` : '';
-    renderExamplePreview(preview, `${source}${managedStyle}`, path === 'templates');
+    const exampleStyle = vanillaSources.css.trim()
+      ? `<style data-playground-css>${escapeInlineCode(vanillaSources.css, 'style')}</style>`
+      : '';
+    if (previewFrame) {
+      previewFrame.classList.remove('wbc-preview-animate');
+      void previewFrame.offsetWidth;
+      previewFrame.classList.add('wbc-preview-animate');
+    }
+    renderExamplePreview(
+      preview,
+      `${source}${exampleStyle}${managedStyle}`,
+      path === 'templates' || path === 'templates-ai',
+      vanillaSources.javascript,
+      previewChannelId,
+    );
+    updatePreviewResizeA11y();
   };
 
-  const applyEditorValue = (source) => {
+  const handleEditorChange = (source) => {
+    if (isSwitchingVanillaFile) return;
+    vanillaSources[activeVanillaFile] = String(source ?? '');
+    if (activeVanillaFile === 'html') {
+      if (!isApplyingEditorValue) applyEditorValue(source);
+      return;
+    }
+    // CSS/JS recriam o preview com debounce para não reexecutar o script a cada tecla.
+    window.clearTimeout(vanillaAssetsPreviewTimer);
+    vanillaAssetsPreviewTimer = window.setTimeout(() => {
+      renderCurrentPreview(editorState.value);
+      scheduleAccessibilityAudit();
+      persistDraft();
+    }, 600);
+  };
+
+  const applyEditorValue = (source, { recordHistory = true } = {}) => {
+    source = String(source ?? '');
+    vanillaSources.html = source;
+    if (recordHistory) recordEditorHistory(source);
     editorState.value = source;
     updateFrameworkCode(source);
     renderCurrentPreview(source);
+    scheduleAccessibilityAudit();
     renderedFilesContent[file] = { content: source.toLowerCase(), element: contentDiv };
-    // The example script lives in the preview iframe and is recreated with it.
+    persistDraft();
+    updateHistoryActions();
+    updateDiff(source);
+    if (!isUpdatingFromControls) {
+      controlsApi?.refresh?.();
+    }
+    // A remoção explícita ocorre antes da recriação do srcdoc para evitar que
+    // o script específico do preset anterior permaneça no documento do iframe.
   };
 
   const fullscreenBottomPanel = document.createElement('div');
   fullscreenBottomPanel.className = 'wbc-example-fullscreen-bottom-panel';
   fullscreenBottomPanel.appendChild(editorContainer);
 
-  preview.setAttribute('slot', 'target');
-  fullscreenBottomPanel.setAttribute('slot', 'target');
-  dropdown.appendChild(header);
-  contentDiv.appendChild(dropdown);
+  contentDiv.append(header, presetDescription, preview, fullscreenBottomPanel);
 
   initializeExample = () => {
     previewFrame = document.createElement('iframe');
@@ -1007,8 +1776,16 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
     previewFrame.title = `Preview do exemplo ${file}`;
     previewFrame.dataset.path = path;
     previewFrame.setAttribute('loading', 'eager');
-    preview.appendChild(previewFrame);
-    renderCurrentPreview(text);
+    previewFrame.addEventListener('load', () => {
+      setPreviewReducedMotion(reducedMotionEnabled);
+      setPreviewTheme(darkThemeEnabled);
+    });
+    previewViewport.append(previewFrame, previewWidthResizeHandle, previewHeightResizeHandle);
+    preview.appendChild(previewViewport);
+    preview.classList.add('wbc-example-preview--resizable');
+    updatePreviewResizeA11y();
+    renderCurrentPreview(editorState.value);
+    scheduleAccessibilityAudit();
 
     const editorReady = window.WBCCodeEditorReady || Promise.resolve(window.WBCCodeEditor);
     editorReady.then(() => {
@@ -1016,7 +1793,7 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
       editorWrapper.textContent = '';
       editorApi = window.WBCCodeEditor.create({
         ariaLabel: `Código fonte do exemplo ${file}`,
-        onChange: applyEditorValue,
+        onChange: handleEditorChange,
         parent: editorWrapper,
         value: editorState.value,
         language: 'html',
@@ -1035,7 +1812,7 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
           parent: editorContainer,
           value: code.textContent || '',
           language: getFrameworkEditorLanguage(framework),
-          readOnly: true,
+          readOnly: tab.dataset.editable !== 'true',
         });
         frameworkEditors.set(tab, editor);
         tab.querySelectorAll('.wbc-framework-file-tab').forEach((fileTab) => {
@@ -1050,7 +1827,7 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
 
     customElements.whenDefined('br-tab').then(() => {
       requestAnimationFrame(async () => {
-        await tabComponent.setActiveTab?.('code-tab');
+        await tabComponent.setActiveTab?.(tabIds.code);
         refreshEditor();
       });
     });
@@ -1065,13 +1842,27 @@ function createExampleElement(path, file, text, isExpanded = false, onOpen) {
       setCss: (value) => {
         controlsCssSource = value;
         renderCurrentPreview(getEditorValue());
+        scheduleAccessibilityAudit();
       },
       setHtml: (value) => {
-        setEditorValue(value);
+        isUpdatingFromControls = true;
+        try {
+          setEditorValue(value);
+        } finally {
+          isUpdatingFromControls = false;
+        }
       },
+    }).then((api) => {
+      controlsApi = api;
     });
   };
 
+  queueMicrotask(() => {
+    if (isInitialized) return;
+    initializeExample();
+    isInitialized = true;
+  });
+
   renderedFilesContent[file] = { content: text.toLowerCase(), element: contentDiv };
 
   return contentDiv;
@@ -1083,7 +1874,13 @@ function createComponentTags(metadata) {
   wrapper.setAttribute('aria-label', 'Classificação do componente');
   const colors = { stable: 'var(--success)', beta: '#ffcd07', deprecated: 'var(--danger)' };
   const labels = { stable: 'Estável', beta: 'Em testes', deprecated: 'Depreciado' };
-  (metadata?.categories || []).forEach((category) => {
+  const categories = Array.from(
+    new Set([
+      ...(Array.isArray(metadata?.categories) ? metadata.categories : []),
+      ...(metadata?.category ? [metadata.category] : []),
+    ]),
+  ).filter((category) => typeof category === 'string' && category.trim());
+  categories.forEach((category) => {
     const tag = document.createElement('br-tag');
     tag.setAttribute('label', category);
     tag.setAttribute('bg-color', 'var(--interactive)');
@@ -1096,7 +1893,7 @@ function createComponentTags(metadata) {
   statusTag.setAttribute('bg-color', colors[status] || colors.stable);
   statusTag.className = `wbc-component-status wbc-component-status--${status}`;
   if (status === 'beta') {
-    statusTag.style.setProperty('--color-dark', '#333');
+    statusTag.classList.add('wbc-component-status--beta');
     const tooltip = document.createElement('br-tooltip');
     tooltip.setAttribute('position', 'top');
     tooltip.setAttribute('aria-label', 'Status: Em testes');
@@ -1113,6 +1910,42 @@ function createComponentTags(metadata) {
   return wrapper;
 }
 
+function createComponentHeading(metadata) {
+  const heading = document.createElement('h1');
+  heading.className = 'wbc-component-title';
+  heading.textContent = metadata?.name || 'Componente';
+  return heading;
+}
+
+function getPresetSource(preset) {
+  if (typeof preset?.source === 'string') return preset.source;
+  return preset?.source?.text || '';
+}
+
+function getSharedExampleState(path, file) {
+  const sharedState = window.SHARED_STATE;
+  if (sharedState?.p !== path || sharedState?.f !== file) return null;
+
+  const { presetId } = getHashState();
+  if (presetId && sharedState.presetId && presetId !== sharedState.presetId) return null;
+  return sharedState;
+}
+
+function getPresetForExample(path, example, presets) {
+  const { file, presetId } = getHashState();
+  const sharedState = getSharedExampleState(path, example.id);
+  const candidateIds = [];
+
+  if (file === example.id && presetId) candidateIds.push(presetId);
+  if (sharedState?.presetId) candidateIds.push(sharedState.presetId);
+  candidateIds.push(example.defaultPreset, ...example.presets);
+
+  return candidateIds
+    .filter(Boolean)
+    .map((id) => presets.find((preset) => preset.id === id))
+    .find((preset) => preset && example.presets.includes(preset.id) && getPresetSource(preset));
+}
+
 function getInitialExampleFile(path, files) {
   const requestedFile = getRequestedExampleFile();
   if (files.includes(requestedFile)) return { initialFile: requestedFile, requestedFile };
@@ -1120,111 +1953,219 @@ function getInitialExampleFile(path, files) {
   return { initialFile: 'default', requestedFile };
 }
 
-function createExamplesList(path, results, initialFile) {
+function createExamplesList(path, results, presets = [], exampleConfigs = [], initialFile = 'default') {
   let sharedElementToScroll = null;
+  let initialPresetId = '';
   const examples = document.createElement('br-list');
   examples.className = 'wbc-examples-list';
   examples.setAttribute('list-role', 'group');
   examples.setAttribute('divider', '');
+  const configById = new Map(exampleConfigs.map((example) => [example.id, example]));
   results.sort((a, b) => Number(b.file === 'default') - Number(a.file === 'default'));
-  results.forEach(({ file, text }, index) => {
+  results.forEach(({ file, text }) => {
+    const config = configById.get(file);
+    const availableIds = Array.isArray(config?.presets) ? new Set(config.presets) : new Set();
+    const availablePresets = presets.filter(({ id }) => availableIds.has(id));
+    const example = {
+      id: file,
+      presets: [...availableIds],
+      defaultPreset: config?.defaultPreset,
+    };
+    const selectedPreset = getPresetForExample(path, example, availablePresets);
+    const fallbackPreset = availablePresets.find(
+      (preset) => preset.id === config?.defaultPreset && getPresetSource(preset),
+    );
+    const selectedPresetId =
+      selectedPreset?.id || fallbackPreset?.id || availablePresets.find((preset) => getPresetSource(preset))?.id || '';
     const element = createExampleElement(
       path,
       file,
       text,
-      file === initialFile || (!initialFile && index === 0),
-      (openedFile) => {
-        const hash = getExampleHash(openedFile);
-        if (window.location.hash !== hash) {
-          window.history.replaceState({}, '', `${window.location.pathname}${window.location.search}${hash}`);
-        }
-        examples.querySelectorAll('br-dropdown').forEach((other) => {
-          if (other !== element.querySelector('br-dropdown') && other.isOpen) other.isOpen = false;
-        });
-      },
+      availablePresets.map(({ source, ...preset }) => ({ ...preset, source: source?.text ?? null })),
+      selectedPresetId,
+      config?.label || file,
     );
+    element.dataset.defaultPreset =
+      fallbackPreset?.id || availablePresets.find((preset) => getPresetSource(preset))?.id || '';
     examples.appendChild(element);
-    if (window.SHARED_STATE?.p === path && window.SHARED_STATE?.f === file) sharedElementToScroll = element;
-  });
-  return { examples, sharedElementToScroll };
-}
-
-function openInitialDropdown(examples, initialFile) {
-  const initialDropdown = initialFile
-    ? examples.querySelector(`[data-example-file="${CSS.escape(initialFile)}"] br-dropdown`)
-    : null;
-  if (!initialDropdown) return;
-  customElements.whenDefined('br-dropdown').then(() => {
-    initialDropdown.isOpen = false;
-    initialDropdown.open();
+    if (file === initialFile) initialPresetId = selectedPresetId;
+    if (getSharedExampleState(path, file)) sharedElementToScroll = element;
   });
+  return { examples, initialPresetId, sharedElementToScroll };
 }
 
 function scrollToInitialExample(examples, requestedFile, sharedElementToScroll) {
   const hashElement = requestedFile
     ? examples.querySelector(`[data-example-file="${CSS.escape(requestedFile)}"]`)
     : null;
-  if (hashElement) setTimeout(() => hashElement.scrollIntoView({ behavior: 'smooth', block: 'center' }), 500);
+  if (hashElement)
+    setTimeout(() => hashElement.scrollIntoView({ behavior: getScrollBehavior(), block: 'center' }), 500);
   if (sharedElementToScroll) {
     setTimeout(() => {
-      sharedElementToScroll.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      sharedElementToScroll.scrollIntoView({ behavior: getScrollBehavior(), block: 'center' });
       sharedElementToScroll.classList.add('wbc-example-shared-highlight');
     }, 500);
   }
 }
 
-function renderLoadedPage(path, files, results) {
+function renderLoadedPage(path, examples, results, presets = []) {
   const metadata = window.MENU_ITEMS?.find((item) => item.path === path);
-  if (metadata) CONTENT_ELEMENT.appendChild(createComponentTags(metadata));
-  const { initialFile, requestedFile } = getInitialExampleFile(path, files);
-  const { examples, sharedElementToScroll } = createExamplesList(path, results, initialFile);
-  CONTENT_ELEMENT.appendChild(examples);
-  openInitialDropdown(examples, initialFile);
-  if (initialFile && files.includes(initialFile) && window.location.hash !== getExampleHash(initialFile)) {
-    window.history.replaceState(
-      {},
-      '',
-      `${window.location.pathname}${window.location.search}${getExampleHash(initialFile)}`,
-    );
+  if (metadata) {
+    CONTENT_ELEMENT.appendChild(createComponentHeading(metadata));
+    CONTENT_ELEMENT.appendChild(createComponentTags(metadata));
+  }
+  const exampleIds = examples.map(({ id }) => id);
+  const { initialFile, requestedFile } = getInitialExampleFile(path, exampleIds);
+  const {
+    examples: examplesList,
+    initialPresetId,
+    sharedElementToScroll,
+  } = createExamplesList(path, results, presets, examples, initialFile);
+  CONTENT_ELEMENT.appendChild(examplesList);
+  if (initialFile && exampleIds.includes(initialFile)) {
+    const targetHash = getExampleHash(initialFile, initialPresetId || undefined);
+    if (window.location.hash !== targetHash) {
+      const url = new URL(window.location.href);
+      url.hash = targetHash;
+      const currentState = window.history.state;
+      const nextState = currentState && typeof currentState === 'object' ? currentState : {};
+      window.history.replaceState(nextState, '', url.href);
+    }
   }
-  scrollToInitialExample(examples, requestedFile, sharedElementToScroll);
+  scrollToInitialExample(examplesList, requestedFile, sharedElementToScroll);
   currentLoadedPath = path;
 }
 
-function loadPage(path, files) {
+function normalizePageExample(example, presets) {
+  const isLegacyExample = typeof example === 'string';
+  const exampleConfig = isLegacyExample ? {} : example;
+  const exampleId = isLegacyExample ? example : exampleConfig.id;
+  const examplePresetIds = Array.isArray(exampleConfig.presets) ? exampleConfig.presets : [];
+  const requestedPresetId = isLegacyExample ? exampleId : exampleConfig.defaultPreset;
+  const fallbackPreset =
+    presets.find(({ id }) => id === requestedPresetId) ??
+    presets.find(({ id }) => id === `example-${exampleId}`) ??
+    presets.find(({ id }) => examplePresetIds.includes(id)) ??
+    presets[0];
+
+  return {
+    ...exampleConfig,
+    id: exampleId,
+    presets: examplePresetIds.length > 0 ? examplePresetIds : fallbackPreset ? [fallbackPreset.id] : [],
+    defaultPreset: exampleConfig.defaultPreset || fallbackPreset?.id,
+  };
+}
+
+function normalizePageExamples(examples, presets) {
+  return examples.map((example) => normalizePageExample(example, presets));
+}
+
+const PLAYGROUND_SOURCE_FETCH_ATTEMPTS = 4;
+
+function waitForPlaygroundSourceRetry(attempt) {
+  return new Promise((resolve) => setTimeout(resolve, attempt * 150));
+}
+
+async function fetchPlaygroundSource(path, source) {
+  if (!source) throw new Error(`Fonte ausente para ${path}`);
+
+  let lastError;
+  for (let attempt = 1; attempt <= PLAYGROUND_SOURCE_FETCH_ATTEMPTS; attempt += 1) {
+    try {
+      const response = await fetch(`${getBaseUrl()}/pages/components/${path}/${source}`, { cache: 'no-store' });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      return stripDevServerConnector(await response.text());
+    } catch (error) {
+      lastError = error;
+      if (attempt < PLAYGROUND_SOURCE_FETCH_ATTEMPTS) await waitForPlaygroundSourceRetry(attempt);
+    }
+  }
+
+  throw lastError;
+}
+
+function loadPage(path, examples, presets = [], baseScript = '', baseStyle = '') {
+  const loadGeneration = ++pageLoadGeneration;
+  cleanupExamples();
   window.WBCActiveRecorders = [];
   CONTENT_ELEMENT.innerHTML = '';
   renderedFilesContent = {};
   if (COMPONENTS_FILTER) COMPONENTS_FILTER.value = ''; // Limpa o campo de busca ao trocar de página
-  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.style.display = 'none'; // Esconde o botão de limpar
-
-  const baseUrl = getBaseUrl();
-  const promises = files.map((file) => {
-    if (window.SHARED_STATE && window.SHARED_STATE.p === path && window.SHARED_STATE.f === file) {
-      return Promise.resolve({ file, text: stripDevServerConnector(window.SHARED_STATE.h) });
+  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.hidden = true;
+
+  const pageExamples = normalizePageExamples(examples, presets);
+  const presetSources = new Map();
+  const uniquePresetSources = [...new Set(presets.map(({ source }) => source).filter(Boolean))];
+  const presetPromises = uniquePresetSources.map((source) =>
+    fetchPlaygroundSource(path, source)
+      .then((text) => {
+        presetSources.set(source, text);
+      })
+      .catch((error) => {
+        console.warn(`Não foi possível carregar o preset ${path}/${source}:`, error);
+      }),
+  );
+  // JS e CSS do preset ficam em arquivos irmãos do HTML; `index.js`/`index.css`
+  // valem para todos os presets do componente e vêm antes do arquivo do preset.
+  const assetSources = new Map();
+  const uniqueAssetSources = [
+    ...new Set([baseScript, baseStyle, ...presets.flatMap(({ script, style }) => [script, style])].filter(Boolean)),
+  ];
+  const assetPromises = uniqueAssetSources.map((source) =>
+    fetchPlaygroundSource(path, source)
+      .then((text) => {
+        assetSources.set(source, text.trim());
+      })
+      .catch((error) => {
+        console.warn(`Não foi possível carregar ${path}/${source}:`, error);
+      }),
+  );
+  const joinAssets = (...sources) =>
+    sources
+      .map((source) => assetSources.get(source))
+      .filter(Boolean)
+      .join('\n\n');
+  const promises = pageExamples.map((example) => {
+    const selectedPreset = getPresetForExample(path, example, presets);
+    const source = getPresetSource(selectedPreset);
+    const sharedState = getSharedExampleState(path, example.id);
+    if (sharedState) {
+      return Promise.resolve({ file: example.id, text: stripDevServerConnector(window.SHARED_STATE.h) });
     }
-    return fetch(`${baseUrl}/pages/components/${path}/${file}.html`).then((response) =>
-      response.text().then((text) => ({ file, text: stripDevServerConnector(text) })),
-    );
+    return fetchPlaygroundSource(path, source).then((text) => ({ file: example.id, text }));
   });
 
-  Promise.all(promises)
-    .then((results) => renderLoadedPage(path, files, results))
+  Promise.all([Promise.all(promises), Promise.all(presetPromises), Promise.all(assetPromises)])
+    .then(([results]) => {
+      if (loadGeneration !== pageLoadGeneration) return;
+      const loadedPresets = presets.map((preset) => ({
+        ...preset,
+        source: presetSources.has(preset.source)
+          ? { text: presetSources.get(preset.source), path: preset.source }
+          : null,
+        javascript: joinAssets(baseScript, preset.script),
+        css: joinAssets(baseStyle, preset.style),
+      }));
+      renderLoadedPage(path, pageExamples, results, loadedPresets);
+    })
     .catch((error) => {
       console.log('Erro ao carregar a página:', error);
     });
 }
 
 function loadMarkdown(path) {
+  const loadGeneration = ++pageLoadGeneration;
+  cleanupExamples();
   CONTENT_ELEMENT.innerHTML = '';
   renderedFilesContent = {};
   if (COMPONENTS_FILTER) COMPONENTS_FILTER.value = ''; // Limpa o campo de busca ao trocar de página
-  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.style.display = 'none'; // Esconde o botão de limpar
+  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.hidden = true;
 
   const baseUrl = getBaseUrl();
   fetch(`${baseUrl}/assets/stencil-generated-docs/${path}.md`)
     .then((response) => response.text())
     .then((text) => {
+      if (loadGeneration !== pageLoadGeneration) return;
       const contentDiv = document.createElement('div');
       contentDiv.classList.add('file', 'mt-2', 'mb-5');
       const parsedMarkdown = typeof markdownParser?.parse === 'function' ? markdownParser.parse(text) : text;
@@ -1280,26 +2221,26 @@ function filterContent() {
       const rows = element.querySelectorAll('table tr');
       rows.forEach((row, index) => {
         if (index === 0) {
-          row.style.display = '';
+          row.hidden = false;
         } else {
           const rowText = row.textContent
             .toLowerCase()
             .normalize('NFD')
             .replace(/[\u0300-\u036f]/g, '');
-          row.style.display = rowText.includes(normalizedFilterValue) ? '' : 'none';
+          row.hidden = !rowText.includes(normalizedFilterValue);
         }
       });
     } else if (
       normalizedFilterValue &&
       (combinedContent.includes(normalizedFilterValue) || normalizedTitleText.includes(normalizedFilterValue))
     ) {
-      element.style.display = ''; // Exibe o elemento se o conteúdo combinado inclui o valor filtrado
+      element.hidden = false;
     } else {
-      element.style.display = normalizedFilterValue ? 'none' : ''; // Oculta se não houver filtro
+      element.hidden = Boolean(normalizedFilterValue);
     }
   });
 
-  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.style.display = filterValue ? 'block' : 'none';
+  if (CLEAR_COMPONENTS_FILTER) CLEAR_COMPONENTS_FILTER.hidden = !filterValue;
 }
 
 function processMenuItems(menuItems, menuBody, currentPath) {
@@ -1314,7 +2255,8 @@ function processMenuItems(menuItems, menuBody, currentPath) {
         link.active = true;
         link.classList.add('active');
       }
-      if (Array.isArray(page.files)) loadPage(page.path, page.files);
+      if (Array.isArray(page.examples))
+        loadPage(page.path, page.examples, page.presets, page.baseScript, page.baseStyle);
     }
   });
 }
@@ -1336,6 +2278,20 @@ function processStaticItems(staticItems, menuBody, currentPath) {
   });
 }
 
+function requestActiveMenuScroll() {
+  if (typeof window.scrollActiveMenuItemIntoView === 'function') {
+    window.scrollActiveMenuItemIntoView();
+  }
+}
+
+function syncRenderedPresetFromLocation() {
+  const { file, presetId } = getHashState();
+  const targetFile = file || 'default';
+
+  const example = CONTENT_ELEMENT?.querySelector(`[data-example-file="${CSS.escape(targetFile)}"]`);
+  example?._applyPresetFromUrl?.(presetId);
+}
+
 // Liga eventos apenas se os elementos existirem
 if (COMPONENTS_FILTER) {
   COMPONENTS_FILTER.addEventListener('input', filterContent);
@@ -1354,6 +2310,8 @@ function loadPageFromURL() {
 
   // Evita recarregar a mesma rota em chamadas repetidas
   if (currentPath === currentLoadedPath) {
+    syncRenderedPresetFromLocation();
+    requestActiveMenuScroll();
     return;
   }
 
@@ -1372,9 +2330,9 @@ function loadPageFromURL() {
   processStaticItems(window.MENU_STATIC_ITEMS, menuBody, currentPath);
 
   if (currentPath.trim().length === 0 && menuItems.length > 0) {
-    const firstPage = menuItems.find((p) => p?.path && Array.isArray(p.files));
+    const firstPage = menuItems.find((p) => p?.path && Array.isArray(p.examples));
     if (firstPage) {
-      loadPage(firstPage.path, firstPage.files);
+      loadPage(firstPage.path, firstPage.examples, firstPage.presets, firstPage.baseScript, firstPage.baseStyle);
       const firstLink = menuBody
         ? Array.from(menuBody.children).find((item) => item.getAttribute('href') === `/${firstPage.path}`)
         : null;
@@ -1385,6 +2343,8 @@ function loadPageFromURL() {
       window.history.pushState({}, '', `${baseUrl}/${firstPage.path}`);
     }
   }
+
+  requestActiveMenuScroll();
 }
 
 // Aguarda DOM e dados do menu antes de tentar carregar a rota atual
@@ -1422,15 +2382,18 @@ if (document.readyState === 'loading') {
 // Garante atualização ao navegar com back/forward
 window.addEventListener('popstate', () => bootstrapRouting());
 
+// O gerador do playground atualiza o índice enquanto o servidor permanece aberto.
+// Invalida a rota carregada para que os presets do JSON sejam lidos novamente.
+window.addEventListener('wbcMenuItemsUpdated', () => {
+  currentLoadedPath = null;
+  bootstrapRouting();
+});
+
 window.addEventListener('hashchange', () => {
+  syncRenderedPresetFromLocation();
   const file = getRequestedExampleFile();
   const example = file ? document.querySelector(`br-item[data-example-file="${CSS.escape(file)}"]`) : null;
   if (!example) return;
 
-  const dropdown = example.querySelector('br-dropdown');
-  if (dropdown) dropdown.isOpen = true;
-  document.querySelectorAll('.wbc-example-dropdown').forEach((other) => {
-    if (other !== dropdown) other.isOpen = false;
-  });
-  setTimeout(() => example.scrollIntoView({ behavior: 'smooth', block: 'center' }), 100);
+  setTimeout(() => example.scrollIntoView({ behavior: getScrollBehavior(), block: 'center' }), 100);
 });