@widgetic/design-system 0.3.88 → 0.5.7

package/dist/components/CopyableHeader.svelte

@@ -30,8 +30,10 @@ const dispatch = createEventDispatcher();
 /**
  * COMPONENT IMPORTS
  */
-import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
-import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+// import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
+import { toast, Button, Tooltip, Portal } from './';
+// import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
+import { IconCopy, IconHelp } from '../icons';
 
 /**
  * COMPONENT PROPS
@@ -189,7 +191,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
         {#if showHelp && helpUrl}
           <Tooltip.Provider>
             <Tooltip.Root open={showHelpTooltip}>
-              <Tooltip.Trigger class="focus:outline-none">
+              <Tooltip.Trigger class="focus:outline-hidden">
                 <a 
                   href={helpUrl} 
                   target="_blank"
@@ -218,7 +220,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
                   <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"
+                    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>
@@ -231,7 +233,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       {#if showStandaloneCopyButton}
         <Tooltip.Provider>
           <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-none">
+            <Tooltip.Trigger class="focus:outline-hidden">
               <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"
@@ -256,7 +258,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
                 <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"
+                  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>
@@ -267,7 +269,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       {:else}
         <Tooltip.Provider>
           <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-none">
+            <Tooltip.Trigger class="focus:outline-hidden">
               <Button 
                 variant="ghost" 
                 size="icon"
@@ -294,7 +296,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
                 <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"
+                  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>
@@ -339,15 +341,11 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
   .copyable-content-area {
     -webkit-user-select: text !important;
     -moz-user-select: text !important;
+    -ms-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;

package/dist/components/EmptyState.svelte

@@ -11,8 +11,10 @@
  * - Responsive: hides icon when space is limited
  -->
 <script lang="ts">
-  import { IconExclamationCircle } from '@widgetic/design-system/icons';
   import { onMount } from 'svelte';
+
+  // import { IconExclamationCircle } from '@widgetic/design-system/icons';
+  import { IconExclamationCircle } from '../icons';
   
   /**
    * Component Props
@@ -116,7 +118,7 @@
 
   /* Icon container to prevent scaling */
   .icon-container {
-    flex-shrink: 0;
+    shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;

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

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { IconExclamationCircle } from '../icons';
 declare const __propDef: {
     props: {
         /**
@@ -15,7 +16,7 @@ declare const __propDef: {
         showIcon?: boolean;
         iconColor?: string;
         textColor?: string;
-        icon?: any;
+        icon?: typeof IconExclamationCircle;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/GenerateLoader.svelte

@@ -0,0 +1,50 @@
+<!--
+  GenerateLoader — reusable hourglass loading state for code generation / preview build.
+  Change the hourglass emoji or animation here to propagate app-wide.
+-->
+<script lang="ts">
+	let className = '';
+	export { className as class };
+	export let style = '';
+
+	/** Primary status line */
+	export let title = 'Generating code…';
+	/** Optional secondary line; pass empty string to hide */
+	export let subtitle = 'Preview will appear when done.';
+	export let size: 'sm' | 'md' | 'lg' = 'md';
+	/** Absolute overlay with light backdrop (e.g. over preview iframe) */
+	export let overlay = false;
+
+	const hourglassSizeClass: Record<typeof size, string> = {
+		sm: 'text-2xl',
+		md: 'text-3xl',
+		lg: 'text-4xl',
+	};
+
+	const titleSizeClass: Record<typeof size, string> = {
+		sm: 'text-xs',
+		md: 'text-sm',
+		lg: 'text-lg',
+	};
+</script>
+
+<div
+	class="wc-generate-loader {overlay
+		? 'wc-generate-loader-overlay absolute inset-0 z-30 flex flex-col items-center justify-center bg-white/75 pointer-events-none'
+		: 'wc-generate-loader-inline flex flex-col items-center justify-center text-center'} {className}"
+	style={style}
+	role="status"
+	aria-live="polite"
+>
+	<div class="wc-generate-loader-hourglass animate-spin {hourglassSizeClass[size]} mb-3 text-gray-500"
+		aria-hidden="true"
+	>
+		⏳
+	</div>
+	{#if title}
+		<div class="wc-generate-loader-title font-medium text-gray-700 {titleSizeClass[size]}">{title}</div>
+	{/if}
+	{#if subtitle}
+		<div class="wc-generate-loader-subtitle mt-1 text-xs text-gray-500">{subtitle}</div>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        style?: string;
+        /** Primary status line */ title?: string;
+        /** Optional secondary line; pass empty string to hide */ subtitle?: string;
+        size?: "sm" | "md" | "lg";
+        /** Absolute overlay with light backdrop (e.g. over preview iframe) */ overlay?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GenerateLoaderProps = typeof __propDef.props;
+export type GenerateLoaderEvents = typeof __propDef.events;
+export type GenerateLoaderSlots = typeof __propDef.slots;
+export default class GenerateLoader extends SvelteComponentTyped<GenerateLoaderProps, GenerateLoaderEvents, GenerateLoaderSlots> {
+}
+export {};

package/dist/components/PasswordInput.svelte

@@ -5,6 +5,10 @@
   // SHADCN Imports
   import { Input } from './ui/input';
 
+  // Import icon URLs
+  import eyeIconUrl from '../icons/eye.svg?url';
+  import eyeOffIconUrl from '../icons/eye-off.svg?url';
+
   // External Props
   export let value = '';
   export let placeholder = 'Enter password';
@@ -37,7 +41,7 @@
       on:click={() => showPassword = !showPassword}
     >
       <img 
-        src={showPassword ? '/icons/eye-off.svg' : '/icons/eye.svg'} 
+        src={showPassword ? eyeOffIconUrl : eyeIconUrl}
         alt={showPassword ? 'Hide password' : 'Show password'} 
         class="w-5 h-5"
       />

package/dist/components/WScrollArea.svelte

@@ -26,16 +26,16 @@ export let element: HTMLElement | null = null;
 <ScrollArea bind:ref={element}
         class={(className ? className + ' ' : '') + "scroll-area-container w-full h-full " + 
               "widgetic-radius widgetic-colors select-text " +  
-              "[&_[data-scroll-area-viewport]]:!pr-[var(--scrollbar-width)]"}
+              "**:!data-scroll-area-viewport:pr-(--scrollbar-width)"}
         style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
                 --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth/4}px; "
         {orientation}
         {type}
         {scrollHideDelay}
-        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-[var(--scrollbar-padding)] " + 
+        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-(--scrollbar-padding) " + 
                           "!bg-transparent border-none select-none touch-none " + 
                           "[&>div]:rounded-[var(--radius-pill)] [&>div]:cursor-pointer " + 
-                          "[&>div]:bg-[hsl(var(--grey1))] [&>div]:hover:bg-[hsl(var(--grey2))] " + 
+                          "[&>div]:bg-[hsl(var(--grey1))] hover:[&>div]:bg-[hsl(var(--grey2))] " + 
                           "[&>div]:transition-colors [&>div]:duration-250"}
       >
       <div class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]" style="margin-right: {scrollbarWidth}px;">

package/dist/components/debug-grid/DebugGrid.svelte

@@ -163,7 +163,7 @@
                   {#if isDashboard && !isMobile}
                     <div class="grid-sidebar flex">
                       <div class="grid-sidebar-margin-left grid-margin-left" style="width: {marginWidth}px"></div>
-                      <div class="grid-sidebar-content grid-column flex-grow"></div>
+                      <div class="grid-sidebar-content grid-column grow"></div>
                       <div class="grid-sidebar-margin-right grid-margin-right" style="width: {marginWidth}px"></div>
                     </div>
                   {/if}

package/dist/components/ic/browser/BrowserInputController.svelte

@@ -333,7 +333,7 @@
           <Tooltip.Content 
             side="right" 
             sideOffset={5}
-            class="bg-gray-900 text-white z-[99999] overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md"
+            class="bg-gray-900 text-white z-99999 overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md"
             style="position: fixed; left: {mouseX + 20}px; top: {mouseY}px; z-index: 999999;"
           >
             <p class="text-sm">{header.helpText}</p>

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as CopyableHeader } from './CopyableHeader.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
+export { default as GenerateLoader } from './GenerateLoader.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as ThumbHashImage } from './ThumbHashImage.svelte';
 export { default as WScrollArea } from './WScrollArea.svelte';
@@ -12,8 +13,7 @@ export { default as Portal } from './modals/Portal.svelte';
 export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs, type BreadcrumbsProps } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
-export { default as SearchInput } from './search-input/SearchInput.svelte';
-export { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
+export { SearchInput } from './search-input';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';

package/dist/components/index.js

@@ -1,6 +1,7 @@
 // Component exports
 export { default as CopyableHeader } from './CopyableHeader.svelte';
 export { default as EmptyState } from './EmptyState.svelte';
+export { default as GenerateLoader } from './GenerateLoader.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as ThumbHashImage } from './ThumbHashImage.svelte';
 export { default as WScrollArea } from './WScrollArea.svelte';
@@ -13,8 +14,7 @@ export { default as Portal } from './modals/Portal.svelte';
 export { default as RenameDialog } from './modals/RenameDialog.svelte';
 export { Breadcrumbs } from './navigation';
 export { default as PDFViewer } from './pdf/PDFViewer.svelte';
-export { default as SearchInput } from './search-input/SearchInput.svelte';
-export { ShadEditor } from './shad-editor';
+export { SearchInput } from './search-input';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';
 export * as Alert from './ui/alert';

package/dist/components/modals/BaseModal.svelte

@@ -284,7 +284,7 @@
       ></div>
 
       <!-- Close button -->
-      <div class="modal-close-bt-container absolute top-4 right-4 z-[1004]" transition:fade={{ duration: transitionDuration, easing }}>
+      <div class="modal-close-bt-container absolute top-4 right-4 z-1004" transition:fade={{ duration: transitionDuration, easing }}>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div 

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -17,7 +17,7 @@ declare const __propDef: {
         children: any;
     };
     events: {
-        click: MouseEvent;
+        click: PointerEvent;
         restore: CustomEvent<any>;
         spaceKey: CustomEvent<any>;
         close: CustomEvent<any>;

package/dist/components/modals/NewItemDialog.svelte

@@ -172,7 +172,7 @@
         }}
         required
         class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-none focus:ring-0
+               bg-transparent border-none focus:outline-hidden focus:ring-0
                placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
                {currentError ? 'input-error' : ''}"
         placeholder={placeholder}

package/dist/components/modals/Portal.svelte

@@ -21,6 +21,8 @@
      */
     let host: HTMLElement; // host(target) container of the portal: parent target of the portal
     let portal: HTMLElement; // root portal element
+    /** Only remove host on destroy if Portal created it (never remove editor portal slots). */
+    let hostCreatedByPortal = false;
     // show logs
     let showLogs = false;
 
@@ -31,23 +33,20 @@
             if(showLogs) console.log('DS Portal target is an HTML element:', target);
             host = target;
         } else {
-            // Make sure target is not empty, use default if it is
-            const targetSelector = `.${target || defaultTarget}`;
-            
-            // find host container in the DOM
-            host = document.querySelector(targetSelector) as HTMLElement;
-            if(showLogs) console.log('DS Portal host:', host, 'target:', target, 'targetSelector:', targetSelector);
+            const targetId = (target || defaultTarget).replace(/^#/, '');
+            // Prefer id (props-editor-file-browser-portal), then class, then body fallback
+            host = document.getElementById(targetId) as HTMLElement | null;
+            if (!host) {
+                host = document.querySelector(`.${targetId}`) as HTMLElement | null;
+            }
+            if(showLogs) console.log('DS Portal host:', host, 'target:', target);
 
             // Create host container if it doesn't exist
             if (!host) {
-                // Create host container in the root of the document
+                hostCreatedByPortal = true;
                 host = document.createElement('div');
-
-                // add the class to the host
-                host.classList.add(target || defaultTarget);
-                // host.dataset.portal = target;
-
-                // append the host to the document's body
+                host.classList.add(targetId);
+                host.id = targetId;
                 document.body.appendChild(host);
             }
         }
@@ -63,8 +62,8 @@
         if (portal && host && host.contains(portal)) {
             host.removeChild(portal);
         }
-        // Remove host if empty
-        if (host && host.childNodes.length === 0) {
+        // Only remove hosts Portal created on body — never delete editor portal slots
+        if (hostCreatedByPortal && host?.parentNode) {
             host.remove();
         }
     });

package/dist/components/modals/RenameDialog.svelte

@@ -264,7 +264,7 @@
         }}
         required
         class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-none focus:ring-0
+               bg-transparent border-none focus:outline-hidden focus:ring-0
                placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
                text-ellipsis-input
                {!isValid && hasAttemptedSubmit ? 'input-error' : ''}"
@@ -283,16 +283,17 @@
 
     <!-- Buttons Container -->
     <div class="buttons-container flex justify-center gap-4">
+      <!-- Cancel Button -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
       <Button 
-        type="button" 
-        variant="secondary"
-        class="modal-btn-secondary !h-[34px]" 
+        class="modal-btn-secondary !h-[34px]"
         onclick={handleClose}
       >
         {cancelLabel}
       </Button>
-      <Button 
-        type="submit" 
+
+      <!-- Confirm Button -->
+      <Button
         class="modal-btn-primary !h-[34px]"
         onclick={handleRename}
         disabled={!isValid}

package/dist/components/navigation/Breadcrumbs.svelte

@@ -5,6 +5,7 @@
   // Components Imports
   import * as Breadcrumb from "../ui/breadcrumb";
   import * as DropdownMenu from "../ui/dropdown-menu";
+  import * as Tooltip from "../ui/tooltip";
 
   // Icons Imports
   // import { IconArrowLeft, IconArrowRight } from '@widgetic/design-system/icons';
@@ -55,6 +56,8 @@
   let breadcrumbsContainer: HTMLElement;
   let breadcrumbsPositioned = false;
   let showLogs = false;
+  let showBackTooltip = false;
+  let showForwardTooltip = false;
   // Calculate how many items we can show based on available width
   // Assuming each item takes roughly 150px on average (including separator)
   $: if (availableWidth > 0) {
@@ -182,38 +185,61 @@
 >
   <!-- NAVIGATION BUTTONS -->
   {#if showNavigationButtons}
-    <div class="nav-buttons flex items-center flex-shrink-0">
-      <!-- Left arrow -->
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6"
-        style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'};"
-        class:opacity-50={!canGoBack || isLoading}
-        on:click={canGoBack && !isLoading ? onBack : undefined}
-        role="button"
-        tabindex={canGoBack && !isLoading ? 0 : -1}
-      >
-        <IconArrowLeft 
-          class="w-6 h-6 text-[hsl(var(--grey6))]" 
-          style="min-width: 24px; min-height: 24px;"
-        />
-      </div>
-      <!-- Right arrow -->
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6 ml-4"
-        style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'};"
-        class:opacity-50={!canGoForward || isLoading}
-        on:click={canGoForward && !isLoading ? onForward : undefined}
-        role="button"
-        tabindex={canGoForward && !isLoading ? 0 : -1}
-      >
-        <IconArrowRight 
-          class="w-6 h-6 text-[hsl(var(--grey6))]" 
-          style="min-width: 24px; min-height: 24px;"
-        />
+    <Tooltip.Provider delayDuration={300}>
+      <div class="nav-buttons flex items-center shrink-0">
+        <Tooltip.Root open={showBackTooltip}>
+          <Tooltip.Trigger class="inline-flex focus:outline-none">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+              class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6"
+              style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'};"
+              class:opacity-50={!canGoBack || isLoading}
+              on:mouseenter={() => { showBackTooltip = true; }}
+              on:mouseleave={() => { showBackTooltip = false; }}
+              on:click={canGoBack && !isLoading ? onBack : undefined}
+              role="button"
+              tabindex={canGoBack && !isLoading ? 0 : -1}
+            >
+              <IconArrowLeft
+                class="w-6 h-6 text-[hsl(var(--grey6))]"
+                style="min-width: 24px; min-height: 24px;"
+              />
+            </div>
+          </Tooltip.Trigger>
+          {#if showBackTooltip}
+            <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
+              Back
+            </Tooltip.Content>
+          {/if}
+        </Tooltip.Root>
+
+        <Tooltip.Root open={showForwardTooltip}>
+          <Tooltip.Trigger class="inline-flex focus:outline-none">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <div
+              class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6 ml-4"
+              style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'};"
+              class:opacity-50={!canGoForward || isLoading}
+              on:mouseenter={() => { showForwardTooltip = true; }}
+              on:mouseleave={() => { showForwardTooltip = false; }}
+              on:click={canGoForward && !isLoading ? onForward : undefined}
+              role="button"
+              tabindex={canGoForward && !isLoading ? 0 : -1}
+            >
+              <IconArrowRight
+                class="w-6 h-6 text-[hsl(var(--grey6))]"
+                style="min-width: 24px; min-height: 24px;"
+              />
+            </div>
+          </Tooltip.Trigger>
+          {#if showForwardTooltip}
+            <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">
+              Forward
+            </Tooltip.Content>
+          {/if}
+        </Tooltip.Root>
       </div>
-    </div>
+    </Tooltip.Provider>
   {/if}
 
   <!-- BREADCRUMBS CONTAINER -->
@@ -222,7 +248,7 @@
       <Breadcrumb.List class="inline-flex items-center min-w-0 breadcrumbs-list">
         <div class="inline-flex items-center min-w-0 min-h-[24px]">
           <!-- Root Breadcrumb Item -->
-          <Breadcrumb.Item class="flex-shrink-0">
+          <Breadcrumb.Item class="shrink-0">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <span 
               role="link"
@@ -241,10 +267,10 @@
           {#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
             {#if shouldShowEllipsis && currentPath.length > itemsToShow}
               <!-- Breadcrumb Separator -->
-              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
 
               <!-- Dropdown Menu for Ellipsis -->
-              <Breadcrumb.Item class="flex-shrink-0">
+              <Breadcrumb.Item class="shrink-0">
                 <DropdownMenu.Root>
                   <DropdownMenu.Trigger class="flex items-center gap-1 cursor-pointer">
                     <span class="h5 text-[hsl(var(--grey6))]">...</span>
@@ -269,8 +295,8 @@
 
               <!-- Always show last N segments based on available width -->
               {#each currentPath.slice(-itemsToShow + 1) as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="flex-shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="shrink-0">
                   {#if index === itemsToShow - 2}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[currentPath.length - 1]}
@@ -293,8 +319,8 @@
               {/each}
             {:else}
               {#each currentPath as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="flex-shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="shrink-0">
                   {#if index === currentPath.length - 1}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[index]}
@@ -323,7 +349,7 @@
   </div>
 
   {#if showDebugVisualizer}
-    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow">
+    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
       Available width: {Math.round(availableWidth)}px
       <br>
       Items to show: {itemsToShow}

package/dist/components/pdf/PDFViewer.svelte

@@ -3,9 +3,10 @@
   import { onMount, onDestroy, tick, afterUpdate, createEventDispatcher } from 'svelte';
 
   // Sveltekit imports
-  import { browser } from '$app/environment';
-  import { base } from '$app/paths';
-  
+  // import { browser } from '$app/environment';
+  const browser = typeof window !== 'undefined';
+  // import { base } from '$app/paths';
+  const base = '';
   // Local components imports
   import { WScrollArea } from '../../components';
   
@@ -542,29 +543,19 @@
     <!-- Page Navigation Bar -->
     <div class="page-navigation-bar flex items-center justify-center h-[54px] widgetic-colors border-b border-[hsl(var(--grey2))] w-full">
       <div class="flex items-center gap-3 w-full max-w-[200px] justify-between px-0">
-        <button
-          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
-          onclick={onPrevPage}
-          disabled={pageNum <= 1}
-          aria-label="Previous page"
-        >
-          <IconChevronLeft 
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1}>
+          <IconChevronLeft
             class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
-            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
         
         <span class="subtext text-[hsl(var(--grey7))]">Page {pageNum} of {pageCount || '?'}</span>
         
-        <button
-          class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border border-[hsl(var(--grey2))] transition-colors group active:scale-95 disabled:opacity-50"
-          onclick={onNextPage}
-          disabled={pageNum >= pageCount}
-          aria-label="Next page"
-        >
-          <IconChevronRight 
+        <button class="pdf-nav-button h-9 w-9 flex items-center justify-center rounded-small bg-white border-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount}>
+          <IconChevronRight
             class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
-            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
       </div>

package/dist/components/pdf/PDFViewer.svelte.d.ts

@@ -20,9 +20,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type PdfViewerProps = typeof __propDef.props;
-export type PdfViewerEvents = typeof __propDef.events;
-export type PdfViewerSlots = typeof __propDef.slots;
-export default class PdfViewer extends SvelteComponentTyped<PdfViewerProps, PdfViewerEvents, PdfViewerSlots> {
+export type PDFViewerProps = typeof __propDef.props;
+export type PDFViewerEvents = typeof __propDef.events;
+export type PDFViewerSlots = typeof __propDef.slots;
+export default class PDFViewer extends SvelteComponentTyped<PDFViewerProps, PDFViewerEvents, PDFViewerSlots> {
 }
 export {};