@widgetic/editor 4.0.6 → 4.0.7

package/dist/components/editors/EmbedEditor.svelte

@@ -1,237 +1,52 @@
-<!-- 
+<!--
 /**
  * EmbedEditor Component
- * 
- * A specialized editor for embedding and customizing widget code with:
- * - One-click copy functionality for embed codes
- * - Visual code highlighting for better readability
- * - Integrated property customization via PropsEditor
- * - Responsive design with configurable dimensions
- * 
- * Note: Requires a valid embedSchema for property customization
+ * Adds a copyable embed code panel to PropsEditor's shared shell.
+ * PropsEditor owns the toolbar, Save control, property fields and drag behavior.
+ * Persistence remains the parent's responsibility through the save event.
  */
- -->
-<script lang="ts">
-
-/**
- * SVELTE IMPORTS
- */
-import { onMount, createEventDispatcher, onDestroy } from 'svelte';
-
-const dispatch = createEventDispatcher();
+-->
+<svelte:options runes={false} />
 
-// Add Sonner import
-import {toast, CopyableHeader} from '@widgetic/design-system/components';
-
-// Add OK icon import
+<script lang="ts">
+import { onMount } from 'svelte';
+import { toast, CopyableHeader } from '@widgetic/design-system/components';
 import OK from '../icons/ok.svelte';
-
-/**
- * LOCAL SVELTE COMPONENTS IMPORTS
- */
 import PropsEditor from './PropsEditor.svelte';
 
-/**
- * SHADCN COMPONENTS
- */
-import { Button, ScrollArea } from '@widgetic/design-system/components';
-
-// Add DragHandle import
-import DragHandle from '../icons/drag.svelte';
-
-/**
- * Component Configuration Props
- * width/height: Control overall component dimensions
- * headerHeight: Space allocated for embed code display section
- * embedSchema: Defines customizable properties for the embedded widget
- * 
- * Note: headerHeight affects the vertical space distribution between
- * the embed code display and property editor sections
- */
+/** Component configuration — existing public props and methods are preserved. */
 let className = '';
 export { className as class };
 export let style = '';
-// header embed props
 export let embedHeaderText = 'Embed code';
 export let embedCode = '';
-// editor props
 export let height = 720;
-// export let headerHeight = 215;
-//
 export let embedSchema: any;
 // Initial values for embed options (overrides schema defaultValue)
 export let initialValues: Record<string, any> = {};
 // When false, skip the outer full-page dark wrapper (for embedding inside another layout)
 export let standalone = true;
-
-
-/**
- * LOCAL VARIABLES
- */
-// Loading state variable
-let loading: boolean = true;
-// Add drag handle visibility state
-let isDragHandleVisible = false;
-
-// Add drag state variables and functions
-let isDragging = false;
-let initialMousePos = { x: 0, y: 0 };
-let initialEditorPos = { left: 0, top: 0 };
-let embedEditorElement: HTMLElement | null = null;
-
-/**
- * ON MOUNT
- */
-onMount(() => {
-  // console.log('EMBED EDITOR Mounted!');
-
-  // show loader while fetching schemas
-  // loading = true;
-
-  // hide loader
-  loading = false;
-  
-  // Setup draggable functionality for EmbedEditor after loading
-  setTimeout(setupDraggable, 300);
-});
-
-// Add cleanup for event listeners
-onDestroy(() => {
-  document.removeEventListener('mousemove', handleMouseMove);
-  document.removeEventListener('mouseup', handleMouseUp);
-});
-
-// Add the draggable setup function
-function setupDraggable() {
-  // Find the EmbedEditor element
-  embedEditorElement = document.querySelector('.embed-editor-container');
-  
-  if (!embedEditorElement) return;
-  
-  // Find the existing drag handle container
-  const dragHandleContainer = embedEditorElement.querySelector('.drag-handle-container') as HTMLElement;
-  
-  if (dragHandleContainer) {
-    // Only add the mousedown event to the drag handle container
-    dragHandleContainer.addEventListener('mousedown', handleMouseDown as EventListener);
-    
-    // Make the drag handle container always visible
-    dragHandleContainer.style.opacity = '0';
-    
-    // Increase opacity on hover
-    dragHandleContainer.addEventListener('mouseenter', () => {
-      dragHandleContainer.style.opacity = '1';
-    });
-    
-    dragHandleContainer.addEventListener('mouseleave', () => {
-      dragHandleContainer.style.opacity = '0';
-    });
-  }
-  
-  // Remove the need for mouse enter/leave to show drag handle
-  embedEditorElement.removeEventListener('mouseenter', handleHeaderMouseEnter);
-  embedEditorElement.removeEventListener('mouseleave', handleHeaderMouseLeave);
-}
-
-// Mouse event handlers for dragging
-function handleMouseDown(e: MouseEvent) {
-  e.preventDefault();
-  
-  if (!embedEditorElement) return;
-  
-  isDragging = true;
-  
-  // Get initial mouse position
-  initialMousePos = { x: e.clientX, y: e.clientY };
-  
-  // Get the current position of the editor
-  const rect = embedEditorElement.getBoundingClientRect();
-  
-  // Get the computed style
-  const computedStyle = window.getComputedStyle(embedEditorElement);
-  
-  // Check the current position type
-  const currentPosition = computedStyle.position;
-  
-  // Set the editor position to absolute and calculate initial position
-  embedEditorElement.style.position = 'absolute';
-  
-  // If it's the first time we're dragging, set up initial position
-  if (currentPosition !== 'absolute') {
-    // Convert to absolute positioning without changing the visual position
-    embedEditorElement.style.margin = '0';
-    embedEditorElement.style.width = `${rect.width}px`;
-    embedEditorElement.style.height = `${rect.height}px`;
-    
-    // Get the parent element's computed style
-    const parentElement = embedEditorElement.parentElement;
-    const parentRect = parentElement ? parentElement.getBoundingClientRect() : { left: 0, top: 0 };
-    
-    // Calculate initial absolute position with parent offset
-    const initialLeft = rect.left - parentRect.left;
-    const initialTop = rect.top - parentRect.top;
-    
-    // Set the initial position
-    embedEditorElement.style.left = `${initialLeft}px`;
-    embedEditorElement.style.top = `${initialTop}px`;
-    
-    // Store initial values for drag calculation
-    initialEditorPos = {
-      left: initialLeft,
-      top: initialTop
-    };
-  } else {
-    // If already absolute, use current left/top values
-    initialEditorPos = {
-      left: parseInt(computedStyle.left) || 0,
-      top: parseInt(computedStyle.top) || 0
-    };
-  }
-  
-  // Add the document event listeners
-  document.addEventListener('mousemove', handleMouseMove);
-  document.addEventListener('mouseup', handleMouseUp);
-  
-  // Change cursor during dragging
-  document.body.style.cursor = 'move';
-}
-
-function handleMouseMove(e: MouseEvent) {
-  if (!isDragging || !embedEditorElement) return;
-  
-  // Calculate the movement delta
-  const dx = e.clientX - initialMousePos.x;
-  const dy = e.clientY - initialMousePos.y;
-  
-  // Update position based on original position plus delta
-  embedEditorElement.style.left = `${initialEditorPos.left + dx}px`;
-  embedEditorElement.style.top = `${initialEditorPos.top + dy}px`;
-}
-
-function handleMouseUp() {
-  if (!isDragging) return;
-  
-  isDragging = false;
-  
-  // Remove the document event listeners
-  document.removeEventListener('mousemove', handleMouseMove);
-  document.removeEventListener('mouseup', handleMouseUp);
-  
-  // Reset cursor
-  document.body.style.cursor = '';
-}
+/** Show Save status control in the shared drag bar (composition embed overlay). */
+export let showSaveButton = false;
+/** True when local embed option edits are not yet persisted. */
+export let saveDirty = false;
+/** True while a save request is in flight. */
+export let saveSaving = false;
+
+// Loading is currently local initialization; preserve the loading/error presentation.
+let loading = true;
+let wrapperElement = null;
+let internalPropsEditorRef = null;
+onMount(() => { loading = false; });
 
 /**
  * Clipboard Interaction Handlers
  * Provides copy functionality via the copy button
  * with visual feedback via toast notifications
  */
-// Add this helper function at the top of your script
 let isToastVisible = false;
-
 function showToast(type: 'success' | 'error', message: string, options = {}) {
   if (isToastVisible) return;
-  
   isToastVisible = true;
   toast[type](message, {
     ...options,
@@ -244,226 +59,96 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       description: 'embed-editor-toast-description',
       closeButton: 'embed-editor-toast-close-button'
     },
-    onAutoClose: () => {
-      isToastVisible = false;
-    },
-    onDismiss: () => {
-      isToastVisible = false;
-    }
+    onAutoClose: () => { isToastVisible = false; },
+    onDismiss: () => { isToastVisible = false; }
   });
 }
 
-/**
- * Component State Management
- * loading: Prevents premature rendering while initializing
- * embedCodeHeaderRef: References header for DOM measurements
- * 
- * Note: Currently loading is simplified as there's no actual data fetching,
- * but the structure supports future async operations
- */
-
-/**
- * Layout Structure
- * The component is organized in layers:
- * 1. Border overlay (z-index: -102)
- * 2. Embed code header (z-index: 100)
- * 3. Props editor (z-index: 10)
- * 
- * This layering ensures proper visual hierarchy and interaction handling
- */
-
-// These functions are no longer needed since we're making the drag handle always visible
-// But we'll keep them for compatibility with any code that might call them
-function handleHeaderMouseEnter() {
-  isDragHandleVisible = true;
-}
-
-function handleHeaderMouseLeave() {
-  isDragHandleVisible = false;
-}
-
-/** Root wrapper element ref for programmatic positioning */
-let wrapperElement: HTMLElement | null = null;
-let internalPropsEditorRef: any = null;
-
-/** Public: update a design value in the internal PropsEditor (for external dimension sync) */
+/** Public: update a design value in the internal PropsEditor (external dimension sync). */
 export function updateValue(propertyId: string, value: any) {
   internalPropsEditorRef?.updateDesignValue?.(propertyId, value);
 }
 
-/** Public: set absolute position programmatically (used by parent for layout) */
+/** Public: position the same element used by PropsEditor's built-in drag. */
 export function setPosition(left: number, top: number) {
-  if (!wrapperElement) return;
-  wrapperElement.style.left = `${left}px`;
-  wrapperElement.style.top = `${top}px`;
+  internalPropsEditorRef?.setPosition(left, top);
 }
 
-/** Public: get current position */
+/** Public: get current position. */
 export function getPosition() {
-  if (!wrapperElement) return { left: 0, top: 0 };
-  return {
-    left: parseFloat(wrapperElement.style.left) || 0,
-    top: parseFloat(wrapperElement.style.top) || 0
-  };
+  return internalPropsEditorRef?.getPosition() || { left: 0, top: 0 };
 }
-
 </script>
 
-
-<!-- HTML -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div 
+<div
   bind:this={wrapperElement}
-  class="{standalone ? 'min-h-screen w-full flex items-center justify-center widgetic-colors widgetic-radius bg-dark p-4' : 'embed-editor-inline-wrapper absolute'}"
+  class="{standalone ? 'embed-editor-standalone-wrapper min-h-screen w-full flex items-center justify-center widgetic-colors widgetic-radius bg-dark p-4' : 'embed-editor-inline-wrapper absolute h-full w-112.5 max-h-full'}"
 >
-  <div 
-    class="{className ? className + ' ' : ''}embed-editor-container
-          flex flex-col justify-center relative bg-white widgetic-colors widgetic-radius overflow-hidden" 
-    style="
-      width: 450px; 
-      height: {!embedCode && !embedSchema ? height + 'px' : !embedSchema ? 'auto' : height + 'px'};
-      border: 2px solid hsl(var(--grey2));
-      border-radius: var(--radius-large);
-      z-index: 0;
-      position: relative;
-      {style ? ' ' + style : ''}
-    "
+  <PropsEditor
+    bind:this={internalPropsEditorRef}
+    class="embed-editor-container rounded-large bg-white shadow-none {className}"
+    style="border: 2px solid hsl(var(--grey2)); max-height: 100%; {style}"
+    width="450px"
+    height={embedSchema ? (standalone ? `min(${height}px, calc(100dvh - 32px))` : `min(${height}px, 100%)`) : 'auto'}
+    positionTarget={standalone ? null : wrapperElement}
+    designSchema={embedCode ? embedSchema : null}
+    contentSchema={null}
+    initialDesignValues={initialValues}
+    defaultOpen={true}
+    showDragHandle={!loading && !!embedCode}
+    {showSaveButton}
+    {saveDirty}
+    {saveSaving}
+    title="Edit Options"
+    dragHandleClass="text-forest-green"
+    headerClass={!loading && embedCode ? 'bg-grey2' : ''}
+    showSchemaError={false}
+    on:save
+    on:propertyChange
   >
-    {#if loading}
-      <div class="loading-text subtext text-grey5 flex items-center justify-center h-full">Loading...</div>
-    {:else if !embedCode}
-      <div class="flex flex-col items-center justify-center h-full">
-        <div class="text-error text-lg font-medium">No embed code available</div>
-        <div class="text-grey5 subtext mt-1">Error code: EMBED_CODE_NOT_FOUND</div>
-      </div>
-    {:else}
-      <!-- Embed Code Header and Text Area Container -->
-      <section 
-        class="header-hover-area bg-grey2" 
-        class:rounded-b-[var(--radius-large)]={!embedSchema}
-        aria-label="Embed code header area"
-      >
-        <!-- Drag Handle -->
-        <div class="absolute top-0 left-0 w-full flex justify-center z-[103]">
-          <div class="flex items-center justify-center h-6 cursor-move transition-all duration-200 widgetic-colors drag-handle-container">
-            <DragHandle class="w-[66px] h-[24px] text-forest-green hover:text-grey3 transition-colors drag-handle" />
-          </div>
-        </div>
-
-        <!-- Use the CopyableHeader component -->
-        <CopyableHeader
-          headerText={embedHeaderText}
-          content={embedCode}
-          helpText="Read more about embedding"
-          helpUrl="/embed"
-          showStandaloneCopyButton={true}
-          standaloneCopyButtonText="Copy to clipboard"
-          showButtonText={false}
-          buttonClass="bg-grey2 text-grey7 hover:bg-white rounded-small"
-          style="border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large);"
-          on:copy={() => {
-            showToast('success', 'Copied to clipboard', {
-              description: 'Paste it anywhere on your site.',
-              icon: OK,
-            });
-          }}
-        />
-      </section>
-
-      <!-- Props Editor - Only show if embedSchema exists -->
-      {#if embedSchema}
-        <div class="w-full flex-1 z-10 bg-white overflow-hidden widgetic-colors">
-          <ScrollArea
-            class="h-full"
-            type="hover"
-            scrollHideDelay={0}
-            scrollbarYClasses="flex touch-none select-none transition-colors w-[24px] px-2 bg-white pt-4 pb-6 [&>div]:w-[8px] [&>div]:bg-grey1 [&>div]:rounded-pill [&>div]:cursor-pointer [&>div]:transition-colors [&>div]:duration-250 [&>div]:hover:bg-grey2 [&>div]:opacity-100"
-          >
-            <div class="scroll-viewport h-full" data-radix-scroll-area-viewport>
-              <div class="min-h-full scroll-content p-0">
-                <PropsEditor
-                  bind:this={internalPropsEditorRef}
-                  class="z-10"
-                  width="450px"
-                  height="100%"
-                  designSchema={embedSchema}
-                  contentSchema={null}
-                  initialDesignValues={initialValues}
-                  defaultOpen={true}
-                  showDragHandle={false}
-                  on:propertyChange={(event: any) => {
-                    dispatch('propertyChange', event.detail);
-                  }}
-                />
-              </div>
-            </div>
-          </ScrollArea>
+    {#snippet headerContent()}
+      {#if loading}
+        <div class="embed-editor-loading subtext text-grey5 flex items-center justify-center h-full">Loading...</div>
+      {:else if !embedCode}
+        <div class="embed-editor-error flex flex-col items-center justify-center h-full">
+          <div class="embed-editor-error-title text-error text-lg font-medium">No embed code available</div>
+          <div class="embed-editor-error-code text-grey5 subtext mt-1">Error code: EMBED_CODE_NOT_FOUND</div>
         </div>
+      {:else}
+        <!-- The only additional panel: code display, help link and clipboard control. -->
+        <section class="embed-editor-code-header header-hover-area relative shrink-0 bg-grey2" aria-label="Embed code header area">
+          <CopyableHeader
+            headerText={embedHeaderText}
+            content={embedCode}
+            helpText="Read more about embedding"
+            helpUrl="/embed"
+            showStandaloneCopyButton={true}
+            standaloneCopyButtonText="Copy to clipboard"
+            showButtonText={false}
+            buttonClass="bg-grey2 text-grey7 hover:bg-white rounded-small focus:outline-none focus-visible:outline-none focus:shadow-none focus-visible:shadow-none"
+            style="border-top-left-radius: var(--radius-large); border-top-right-radius: var(--radius-large);"
+            on:copy={() => {
+              showToast('success', 'Copied to clipboard', {
+                description: 'Paste it anywhere on your site.',
+                icon: OK
+              });
+            }}
+          />
+        </section>
       {/if}
-    {/if}
-  </div>
+    {/snippet}
+  </PropsEditor>
 </div>
 
 <style>
-  /* Drag Handle Visibility */
-  .header-hover-area {
-    position: relative;
-  }
-
-  .drag-handle-container {
-    transition: opacity 0.3s ease;
-    /* Ensure the drag handle is always visible on top */
-    z-index: 103;
-  }
-
-  /* Only apply move cursor to the drag handle */
-  .drag-handle-container {
-    cursor: move;
-  }
-
-  /* Drag Handle Icon */
-  :global(.drag-handle svg) {
-    color: hsl(var(--forest-green)) !important;
-    transition: color 0.2s ease !important;
-  }
-
-  /* Remove white background on hover for drag handle */
-  :global(.drag-handle:hover) {
-    background-color: transparent !important;
-  }
-
-  :global(.drag-handle:hover svg) {
-    color: hsl(var(--grey3)) !important;
-  }
-
-  /* Remove box shadow */
-  .embed-editor-container {
-    box-shadow: none;
-    transform: translateZ(0); /* Force GPU acceleration */
-  }
-
-  /* Prevent shadow inheritance for PropsEditor */
-  :global(.props-editor-container) {
-    box-shadow: none !important;
-    border: none !important;
-    padding: 0 !important;
-  }
-
-  /* Add this to ensure proper border radius inheritance */
-  :global(.embed-editor-container .props-editor-container) {
-    border-bottom-left-radius: var(--radius-large);
-    border-bottom-right-radius: var(--radius-large);
-    overflow: visible !important;
-    width: 100% !important;
+  /* Remove the DS inline top padding only inside this embed header. */
+  .embed-editor-code-header :global(.copyable-header) {
+    padding-top: 0 !important;
   }
 
-  :global(.embed-editor-container .props-editor-container > div) {
-    padding: 0 !important;
-    height: 100% !important;
-  }
-
-  /* Style accordion items to match Design system */
-  :global(.embed-editor-container .accordion-item) {
+  /* Style accordion items to match Design system — only within this Embed instance. */
+  .embed-editor-inline-wrapper :global(.accordion-item),
+  .embed-editor-standalone-wrapper :global(.accordion-item) {
     border: 2px solid hsl(var(--grey2)) !important;
     background: white !important;
     overflow: hidden !important;
@@ -471,22 +156,23 @@ export function getPosition() {
     position: relative !important;
   }
 
-  /* Style based on item name */
-  :global(.embed-editor-container .accordion-item[data-accordion-id="Basic Options"]) {
+  /* Accordion Item: Handle first, last and single items. */
+  :global(.embed-editor-container .accordion-item[data-position="only"]) {
+    border-radius: var(--radius-medium) !important;
+  }
+  :global(.embed-editor-container .accordion-item[data-position="first"]) {
     border-top-left-radius: var(--radius-medium) !important;
     border-top-right-radius: var(--radius-medium) !important;
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 0 !important;
   }
-
-  :global(.embed-editor-container .accordion-item[data-accordion-id="Advanced Settings"]) {
+  :global(.embed-editor-container .accordion-item[data-position="last"]) {
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
     border-bottom-left-radius: var(--radius-medium) !important;
     border-bottom-right-radius: var(--radius-medium) !important;
     margin-bottom: 0 !important;
   }
-
   :global(.embed-editor-container .accordion-trigger) {
     padding: 16px !important;
     width: 100% !important;
@@ -496,56 +182,25 @@ export function getPosition() {
     background: white !important;
     border: none !important;
   }
-
   :global(.embed-editor-container .accordion-trigger:hover .body-medium) {
     text-decoration: underline !important;
   }
-
   :global(.embed-editor-container .accordion-content) {
     padding: 16px !important;
     border-top: 2px solid hsl(var(--grey2)) !important;
   }
-
   :global(.embed-editor-container .accordion-content > div) {
     padding: 0 !important;
     background: white !important;
   }
-
-  /* Style the chevron icon */
+  /* Style the chevron icon. */
   :global(.embed-editor-container .accordion-trigger .chevron) {
     transition: transform 200ms ease-out !important;
   }
-
   :global(.embed-editor-container .accordion-trigger[data-state="open"] .chevron) {
     transform: rotate(180deg) !important;
   }
-
-  /* Style for the embed code text area */
-  .embed-code-textarea {
-    -webkit-user-select: text !important;
-    -moz-user-select: text !important;
-    -ms-user-select: text !important;
-    user-select: text !important;
-    font-family: monospace !important;
-    overflow-y: auto !important;
-  }
-
-  .embed-code-textarea::selection {
-    background-color: rgba(59, 130, 246, 0.2) !important;
-    color: inherit !important;
-  }
-
-  .embed-code-textarea::-moz-selection {
-    background-color: rgba(59, 130, 246, 0.2) !important;
-    color: inherit !important;
-  }
-
-  .text-wrapper {
-    font-family: monospace !important;
-    line-height: 1;
-  }
-
-  /* Ensure inputs maintain their container width */
+  /* Ensure inputs maintain their container width. */
   :global(.embed-editor-container input),
   :global(.embed-editor-container select),
   :global(.embed-editor-container textarea),
@@ -556,37 +211,16 @@ export function getPosition() {
     min-width: 0;
     box-sizing: border-box;
   }
-
-  /* Force width constraints on content */
-  :global(.embed-editor-container .props-editor-container) {
-    width: 100%;
-    min-width: 0;
-    overflow: visible;
-  }
-
-  /* Ensure popover content stays within bounds */
+  /* Ensure popover content stays within bounds. */
   :global(.embed-editor-container .popover-content) {
     max-width: calc(100% - 2rem);
     min-width: 0;
   }
-
-  /* Add scroll visibility styles */
-  :global(.embed-editor-container [data-radix-scroll-area-viewport]) {
-    width: 100% !important;
-  }
-
-  :global(.embed-editor-container .scroll-area) {
-    width: 100% !important;
-    overflow: visible !important;
-  }
-
   /* Button Press Effect */
-  :global(.embed-code-header button) {
+  :global(.embed-editor-container .embed-code-header button) {
     transition: background-color 0.1s ease;
   }
-
   /** TOASTER STYLES **/
-  /* Toaster Positioning */
   :global(.embed-editor-toast) {
     position: fixed !important;
     bottom: 20px !important;
@@ -600,7 +234,6 @@ export function getPosition() {
     border-radius: var(--radius-small) !important;
     box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1) !important;
   }
-
   /* Icon container */
   :global(.embed-editor-toast [data-icon]) {
     order: -1 !important;
@@ -609,7 +242,6 @@ export function getPosition() {
     justify-content: center !important;
     margin: 0 !important;
   }
-
   /* Text container */
   :global(.embed-editor-toast [data-content]) {
     display: flex !important;
@@ -617,84 +249,23 @@ export function getPosition() {
     gap: 4px !important;
     margin: 0 !important;
   }
-
-  /* Toaster title */
-  .embed-editor-title {
-    font-size: var(--h6) !important;
-    color: hsl(var(--forest)) !important;
-    font-weight: 600 !important;
-  }
-
-  /* Toaster description */
-  .embed-editor-toast-description {
-    font-size: var(--caption) !important;
-    color: hsl(var(--grey3)) !important;
-  }
-
-  /* Toaster icon */
-  .embed-editor-toast-icon {
-    width: 40px !important;
-    height: 40px !important;
-  }
-
   /* Toaster close button */
   :global(.embed-editor-toast-close-button) {
     background: hsl(var(--grey7)) !important;
     border: 1px solid hsl(var(--grey5)) !important;
   }
-
   :global(.embed-editor-toast-close-button:hover) {
     background: hsl(var(--dark)) !important;
     border: 1px solid hsl(var(--grey5)) !important;
   }
-
   :global(.embed-editor-toast-close-button svg) {
     color: white !important;
   }
-
-  /* Accordion Item: Update CSS to handle single items */
-  :global(.embed-editor-container .accordion-item[data-position="only"]) {
-    border-radius: var(--radius-medium) !important;
-  }
-
-  :global(.embed-editor-container .accordion-item[data-position="first"]) {
-    border-top-left-radius: var(--radius-medium) !important;
-    border-top-right-radius: var(--radius-medium) !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  :global(.embed-editor-container .accordion-item[data-position="last"]) {
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-left-radius: var(--radius-medium) !important;
-    border-bottom-right-radius: var(--radius-medium) !important;
-  }
-
-  /* Lucide Copy Icon: Set both default and hover colors */
-  :global(.lucide-copy) {
+  /* Lucide Copy Icon: Set both default and hover colors. */
+  :global(.embed-editor-container .lucide-copy) {
     stroke: hsl(var(--error)) !important;
   }
-  
-  :global(button:hover .lucide-copy) {
+  :global(.embed-editor-container button:hover .lucide-copy) {
     stroke: hsl(var(--grey7)) !important;
   }
-
-  /* Add styles for dots pattern */
-  .dots-pattern {
-    cursor: move;
-    user-select: none;
-  }
-
-  .dots-pattern:active {
-    cursor: grabbing;
-  }
-
-  /* Add styles for error message */
-  :global(.subtext) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-  }
 </style>
-