@widgetic/design-system 0.3.68

package/dist/components/CopyableHeader.svelte

@@ -0,0 +1,456 @@
+<!-- 
+/**
+ * CopyableHeader Component
+ * 
+ * A reusable header component for displaying content that can be copied to clipboard:
+ * - One-click copy functionality with visual feedback
+ * - Optional help icon with tooltip
+ * - Configurable header text and content
+ * - Consistent styling with the design system
+ * 
+ * Usage:
+ * ```svelte
+ * <CopyableHeader
+ *   headerText="Embed code"
+ *   content="<widgetic id='123' width='350' height='50'></widgetic>"
+ *   helpText="Read more about embedding"
+ *   helpUrl="/embed"
+ * />
+ * ```
+ */
+ -->
+<script lang="ts">
+/**
+ * SVELTE IMPORTS
+ */
+import { createEventDispatcher } from 'svelte';
+
+const dispatch = createEventDispatcher();
+
+/**
+ * COMPONENT IMPORTS
+ */
+import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
+import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+
+/**
+ * COMPONENT PROPS
+ */
+let className = '';
+export { className as class };
+export let style = '';
+export let headerText = 'Copy content';
+export let content = '';
+export let helpText = 'Learn more';
+export let helpUrl = '';
+export let showHelp = true;
+export let monospaceContent = true;
+export let showStandaloneCopyButton = false;
+export let standaloneCopyButtonText = '';
+export let showButtonText = true;
+export let buttonClass = '';
+export let showInternalToast = true;
+export let headerTextClass = '';
+export let headerBackgroundColor = '';
+export let contentBorderColor = '';
+
+/**
+ * LOCAL VARIABLES
+ */
+let mouseX = 0;
+let mouseY = 0;
+let showHelpTooltip = false;
+let showCopyTooltip = false;
+let tooltipDebounce = false;
+
+/**
+ * MOUSE EVENTS HANDLERS
+ */
+function handleMouseEnter(event: MouseEvent) {
+  if (tooltipDebounce) return;
+  mouseX = event.clientX;
+  mouseY = event.clientY;
+  showHelpTooltip = true;
+}
+
+function handleCopyMouseEnter(event: MouseEvent) {
+  if (tooltipDebounce) return;
+  mouseX = event.clientX;
+  mouseY = event.clientY;
+  showCopyTooltip = true;
+}
+
+function handleMouseMove(event: MouseEvent) {
+  mouseX = event.clientX;
+  mouseY = event.clientY;
+}
+
+function handleMouseLeave() {
+  showHelpTooltip = false;
+}
+
+function handleCopyMouseLeave() {
+  showCopyTooltip = false;
+}
+
+function setTooltipDebounce() {
+  tooltipDebounce = true;
+  setTimeout(() => {
+    tooltipDebounce = false;
+  }, 500); // Prevent tooltips from showing for 500ms after clicking
+}
+
+/**
+ * Clipboard Interaction Handlers
+ * Provides copy functionality via the copy button
+ * with visual feedback via toast notifications
+ */
+async function handleCopyButtonClick(e: MouseEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  
+  // Immediately hide the tooltip to prevent flickering
+  showCopyTooltip = false;
+  setTooltipDebounce();
+  
+  // Find the content element and select all text
+  const contentElement = document.querySelector('.copyable-content-area');
+  if (contentElement) {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(contentElement);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  try {
+    await navigator.clipboard.writeText(content);
+    if (showInternalToast) {
+      showToast('success', 'Copied to clipboard', {
+        description: 'Content copied successfully.',
+      });
+    }
+    dispatch('copy', { content });
+  } catch (err) {
+    if (showInternalToast) {
+      showToast('error', 'Copy failed', {
+        description: 'Please try manual selection',
+      });
+    }
+    dispatch('copyError', { error: err });
+  }
+}
+
+// Toast helper function
+let isToastVisible = false;
+
+function showToast(type: 'success' | 'error', message: string, options = {}) {
+  if (isToastVisible) return;
+  
+  isToastVisible = true;
+  toast[type](message, {
+    ...options,
+    duration: 5000,
+    unstyled: true,
+    classes: {
+      toast: 'copyable-header-toast flex items-center gap-3',
+      title: 'copyable-header-toast-title',
+      description: 'copyable-header-toast-description',
+      closeButton: 'copyable-header-toast-close-button'
+    },
+    onAutoClose: () => {
+      isToastVisible = false;
+    },
+    onDismiss: () => {
+      isToastVisible = false;
+    }
+  });
+}
+</script>
+
+<!-- Header Container -->
+<div 
+  class="{className ? className + ' ' : ''}copyable-header-container
+        w-full {headerBackgroundColor || 'bg-[hsl(var(--grey2))]'} widgetic-colors widgetic-radius"
+  style="z-index: 102; position: relative; {style}"
+>
+  <!-- Header with Title and Copy Button -->
+  <div 
+    class="copyable-header w-full flex flex-col justify-center gap-[16px] relative"
+    style="
+      padding: 8px 24px 0px 24px;
+      z-index: 102;
+    "
+  >
+    <!-- Header Text and Copy Button -->
+    <div class="flex justify-between items-center">
+      <div class="flex items-center gap-2">
+        <div class="{headerTextClass || 'body-medium text-[hsl(var(--grey7))]'}">{headerText}</div>
+        {#if showHelp && helpUrl}
+          <Tooltip.Provider>
+            <Tooltip.Root open={showHelpTooltip}>
+              <Tooltip.Trigger class="focus:outline-none">
+                <a 
+                  href={helpUrl} 
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  role="button"
+                  tabindex="0"
+                  class="inline-flex items-center justify-center w-6 h-6 cursor-pointer"
+                  onmouseenter={handleMouseEnter}
+                  onmousemove={handleMouseMove}
+                  onmouseleave={handleMouseLeave}
+                  onmousedown={() => {
+                    showHelpTooltip = false;
+                    setTooltipDebounce();
+                  }}
+                  onclick={(e) => {
+                    e.preventDefault();
+                    window.open(helpUrl, '_blank', 'noopener,noreferrer');
+                  }}
+                >
+                  <IconHelp class="w-5 h-5 text-[hsl(var(--grey5))] hover:text-[hsl(var(--deep-forest-green))] transition-colors duration-200" />
+                </a>
+              </Tooltip.Trigger>
+              
+              {#if showHelpTooltip}
+                <Portal target="editor-tooltips">
+                  <Tooltip.Content 
+                    side="right" 
+                    sideOffset={5}
+                    class="bg-[hsl(var(--dark))] text-white z-[200000] overflow-hidden rounded-md px-2 py-1.5 shadow-md widgetic-colors widgetic-radius"
+                  >
+                    <p class="caption text-white">{helpText}</p>
+                  </Tooltip.Content>
+                </Portal>
+              {/if}
+            </Tooltip.Root>
+          </Tooltip.Provider>
+        {/if}
+      </div>
+      {#if showStandaloneCopyButton}
+        <Tooltip.Provider>
+          <Tooltip.Root open={showCopyTooltip}>
+            <Tooltip.Trigger class="focus:outline-none">
+              <Button 
+                variant="default" 
+                class="h-9 w-6 {headerBackgroundColor ? headerBackgroundColor + ' text-[hsl(var(--grey7))]' : buttonClass || 'bg-[hsl(var(--dark))] hover:bg-white text-white rounded-full'} flex items-center justify-center active:scale-95 transition-transform duration-150"
+                onclick={handleCopyButtonClick}
+                onmouseenter={handleCopyMouseEnter}
+                onmousemove={handleMouseMove}
+                onmouseleave={handleCopyMouseLeave}
+                onmousedown={() => {
+                  showCopyTooltip = false;
+                  setTooltipDebounce();
+                }}
+              >
+                <IconCopy class="w-5 h-5" style="width: 20px !important; height: 20px !important;" />
+                {#if showButtonText}
+                  <span class="ml-2">{standaloneCopyButtonText}</span>
+                {/if}
+              </Button>
+            </Tooltip.Trigger>
+            
+            {#if showCopyTooltip}
+              <Portal target="editor-tooltips">
+                <Tooltip.Content 
+                  side="left" 
+                  sideOffset={5}
+                  class="bg-[hsl(var(--dark))] text-white z-[200000] overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
+                >
+                  <p class="caption text-white">{standaloneCopyButtonText}</p>
+                </Tooltip.Content>
+              </Portal>
+            {/if}
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      {:else}
+        <Tooltip.Provider>
+          <Tooltip.Root open={showCopyTooltip}>
+            <Tooltip.Trigger class="focus:outline-none">
+              <Button 
+                variant="ghost" 
+                size="icon"
+                class="h-10 w-10 {headerBackgroundColor ? headerBackgroundColor : 'hover:bg-white'} active:scale-95 transition-transform duration-150 mr-[-4px]"
+                onclick={handleCopyButtonClick}
+                onmouseenter={handleCopyMouseEnter}
+                onmousemove={handleMouseMove}
+                onmouseleave={handleCopyMouseLeave}
+                onmousedown={() => {
+                  showCopyTooltip = false;
+                  setTooltipDebounce();
+                }}
+                aria-label={standaloneCopyButtonText}
+              >
+                <IconCopy 
+                  class="w-[20px] h-[20px] transition-colors duration-300 text-[hsl(var(--grey5))] hover:text-[hsl(var(--grey7))]"
+                  style="width: 20px !important; height: 20px !important;"
+                />
+              </Button>
+            </Tooltip.Trigger>
+            
+            {#if showCopyTooltip}
+              <Portal target="editor-tooltips">
+                <Tooltip.Content 
+                  side="left" 
+                  sideOffset={5}
+                  class="bg-[hsl(var(--dark))] text-white z-[200000] overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
+                >
+                  <p class="caption text-white">{standaloneCopyButtonText}</p>
+                </Tooltip.Content>
+              </Portal>
+            {/if}
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Content Area -->
+  <div class="px-6 pb-6">
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div 
+      class="copyable-content-area text-[14px] w-full text-left bg-white relative {monospaceContent ? 'font-mono' : ''}"
+      style="
+        padding: 16px;
+        min-height: 80px;
+        max-height: 141px;
+        z-index: 101;
+        line-height: 1.5;
+        border: 1px solid {contentBorderColor || 'hsl(var(--grey2))'};
+        border-radius: var(--radius-small);
+        margin: 0 -2px -2px -2px;
+        width: calc(100% + 4px);
+        cursor: text;
+        white-space: pre-wrap;
+        word-break: break-all;
+        overflow-wrap: anywhere;
+        overflow-y: auto;
+      "
+      tabindex="0"
+    >
+      {content}
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Style for the content area */
+  .copyable-content-area {
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    user-select: text !important;
+    overflow-y: auto !important;
+  }
+
+  .copyable-content-area::-moz-selection {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: inherit !important;
+  }
+
+  .copyable-content-area::selection {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: inherit !important;
+  }
+
+  .copyable-content-area::-moz-selection {
+    background-color: rgba(59, 130, 246, 0.2) !important;
+    color: inherit !important;
+  }
+
+  /* Help icon hover styles */
+  :global(.copyable-header-container .w-6.h-6) {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border-radius: 50% !important;
+    transition: background-color 0.2s ease !important;
+  }
+
+  /* Removed the hover background effect for the help icon */
+  /* :global(.copyable-header-container .w-6.h-6:hover) {
+    background-color: rgba(255, 255, 255, 0.5) !important;
+  } */
+
+  /* Button Press Effect */
+  :global(.copyable-header button) {
+    transition: transform 0.15s ease, background-color 0.1s ease;
+  }
+
+  /* Add hover styles for the standalone copy button */
+  :global(.copyable-header-container button[variant="default"]:hover) {
+    background-color: white !important;
+    color: hsl(var(--grey7)) !important;
+  }
+
+  /* Prevent hover background change for buttons with custom header background */
+  :global(.copyable-header-container button[class*="bg-"]:hover) {
+    background-color: inherit !important;
+  }
+
+  /* Add active scale effect for all buttons */
+  :global(.copyable-header button:active) {
+    transform: scale(0.95);
+  }
+
+  /** TOASTER STYLES **/
+  /* Toaster Positioning */
+  :global(.copyable-header-toast) {
+    position: fixed !important;
+    bottom: 20px !important;
+    right: 20px !important;
+    top: auto !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+    padding: 16px 24px !important;
+    background: white !important;
+    border-radius: var(--radius-small) !important;
+    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  /* Icon container */
+  :global(.copyable-header-toast [data-icon]) {
+    order: -1 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0 !important;
+  }
+
+  /* Text container */
+  :global(.copyable-header-toast [data-content]) {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 4px !important;
+    margin: 0 !important;
+  }
+
+  /* Toaster title */
+  .copyable-header-toast-title {
+    font-size: var(--h6) !important;
+    color: hsl(var(--forest)) !important;
+    font-weight: 600 !important;
+  }
+
+  /* Toaster description */
+  .copyable-header-toast-description {
+    font-size: var(--caption) !important;
+    color: hsl(var(--grey3)) !important;
+  }
+
+  /* Toaster close button */
+  :global(.copyable-header-toast-close-button) {
+    background: hsl(var(--grey7)) !important;
+    border: 1px solid hsl(var(--grey5)) !important;
+  }
+
+  :global(.copyable-header-toast-close-button:hover) {
+    background: hsl(var(--dark)) !important;
+    border: 1px solid hsl(var(--grey5)) !important;
+  }
+
+  :global(.copyable-header-toast-close-button svg) {
+    color: white !important;
+  }
+</style> 

package/dist/components/CopyableHeader.svelte.d.ts

@@ -0,0 +1,40 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CopyableHeader: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * COMPONENT PROPS
+     */ class?: string;
+    style?: string;
+    headerText?: string;
+    content?: string;
+    helpText?: string;
+    helpUrl?: string;
+    showHelp?: boolean;
+    monospaceContent?: boolean;
+    showStandaloneCopyButton?: boolean;
+    standaloneCopyButtonText?: string;
+    showButtonText?: boolean;
+    buttonClass?: string;
+    showInternalToast?: boolean;
+    headerTextClass?: string;
+    headerBackgroundColor?: string;
+    contentBorderColor?: string;
+}, {
+    copy: CustomEvent<any>;
+    copyError: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CopyableHeader = InstanceType<typeof CopyableHeader>;
+export default CopyableHeader;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,145 @@
+<!--
+ * EmptyState Component
+ * A reusable component for displaying empty state messages
+ * 
+ * Features:
+ * - Centered message with icon
+ * - Customizable message text
+ * - Customizable icon
+ * - Adjustable height
+ * - Optional action button
+ * - Responsive: hides icon when space is limited
+ -->
+<script lang="ts">
+  import { IconExclamationCircle } from '@widgetic/design-system/icons';
+  import { onMount } from 'svelte';
+  
+  /**
+   * Component Props
+   * @prop {string} message - The message to display in the empty state
+   * @prop {string} height - The height of the empty state container (default: '50vh')
+   * @prop {boolean} showIcon - Whether to show the icon (default: true)
+   * @prop {string} iconColor - The color of the icon (default: 'hsl(var(--grey3))')
+   * @prop {string} textColor - The color of the text (default: 'hsl(var(--grey3))')
+   */
+  let className = '';
+  export { className as class };
+  export let style: string = '';
+  //
+  export let message: string = "No items found";
+  export let height: string = "150px";
+  export let showIcon: boolean = true;
+  export let iconColor: string = "hsl(var(--grey3))";
+  export let textColor: string = "hsl(var(--grey3))";
+  
+  // Allow passing a custom icon component
+  let iconComponent = IconExclamationCircle;
+  export { iconComponent as icon };
+
+  // References to DOM elements
+  let contentContainer: HTMLDivElement;
+  let shouldShowIcon = showIcon;
+
+  // Function to check if there's enough space for the icon
+  function checkSpaceForIcon() {
+    if (!contentContainer || !showIcon) return;
+    
+    const containerWidth = contentContainer.clientWidth;
+    // If container is too narrow (less than 150px), hide the icon
+    shouldShowIcon = containerWidth > 150;
+  }
+
+  onMount(() => {
+    // Initial check
+    checkSpaceForIcon();
+    
+    // Set up resize observer to check space when container size changes
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver(() => {
+        checkSpaceForIcon();
+      });
+      
+      if (contentContainer) {
+        resizeObserver.observe(contentContainer);
+      }
+      
+      return () => {
+        if (contentContainer) {
+          resizeObserver.unobserve(contentContainer);
+        }
+      };
+    }
+  });
+</script>
+
+<div class="empty-state-container {className ? className + ' ' : ''}w-full" style="height: {height} {style}">
+  <div class="empty-state-content" bind:this={contentContainer}>
+    {#if shouldShowIcon}
+      <div class="icon-container">
+        <svelte:component this={iconComponent} class="icon" style="color: {iconColor}" />
+      </div>
+    {/if}
+    <p class="subtext" style="color: {textColor}">{message}</p>
+    
+    {#if $$slots.action}
+      <div class="ml-2">
+        <slot name="action" />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Container takes up full width and prevents scrolling */
+  .empty-state-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0; /* Lower z-index so it doesn't block interactive elements */
+    pointer-events: none; /* Allow clicks to pass through to elements behind */
+  }
+  
+  /* Content is centered and has proper spacing */
+  .empty-state-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    text-align: center;
+    padding: 0 1rem;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    pointer-events: auto; /* Re-enable pointer events for the content itself */
+  }
+
+  /* Icon container to prevent scaling */
+  .icon-container {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Ensure text doesn't get squished */
+  .subtext {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Media query as a fallback for browsers that don't support ResizeObserver */
+  @media (max-width: 200px) {
+    .icon-container {
+      display: none;
+    }
+  }
+</style> 

package/dist/components/EmptyState.svelte.d.ts

@@ -0,0 +1,36 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * @prop {string} message - The message to display in the empty state
+       * @prop {string} height - The height of the empty state container (default: '50vh')
+       * @prop {boolean} showIcon - Whether to show the icon (default: true)
+       * @prop {string} iconColor - The color of the icon (default: 'hsl(var(--grey3))')
+       * @prop {string} textColor - The color of the text (default: 'hsl(var(--grey3))')
+       */ class?: string;
+    style?: string;
+    message?: string;
+    height?: string;
+    showIcon?: boolean;
+    iconColor?: string;
+    textColor?: string;
+    icon?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    action: {};
+}, {}, string>;
+type EmptyState = InstanceType<typeof EmptyState>;
+export default EmptyState;