@widgetic/design-system 0.3.78 → 0.3.80

package/dist/components/CopyableHeader.svelte

@@ -30,10 +30,8 @@ const dispatch = createEventDispatcher();
 /**
  * COMPONENT IMPORTS
  */
-// 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';
+import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
+import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
 
 /**
  * COMPONENT PROPS
@@ -191,7 +189,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
         {#if showHelp && helpUrl}
           <Tooltip.Provider>
             <Tooltip.Root open={showHelpTooltip}>
-              <Tooltip.Trigger class="focus:outline-hidden">
+              <Tooltip.Trigger class="focus:outline-none">
                 <a 
                   href={helpUrl} 
                   target="_blank"
@@ -220,7 +218,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>
@@ -233,7 +231,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       {#if showStandaloneCopyButton}
         <Tooltip.Provider>
           <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-hidden">
+            <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"
@@ -258,7 +256,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>
@@ -269,7 +267,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
       {:else}
         <Tooltip.Provider>
           <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-hidden">
+            <Tooltip.Trigger class="focus:outline-none">
               <Button 
                 variant="ghost" 
                 size="icon"
@@ -296,7 +294,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>
@@ -341,11 +339,15 @@ 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,10 +11,8 @@
  * - 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
@@ -98,11 +96,6 @@
     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 */
   }
@@ -123,7 +116,7 @@
 
   /* Icon container to prevent scaling */
   .icon-container {
-    shrink: 0;
+    flex-shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;

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

@@ -1,4 +1,3 @@
-import { IconExclamationCircle } from '../icons';
 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;
@@ -27,7 +26,7 @@ declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
     showIcon?: boolean;
     iconColor?: string;
     textColor?: string;
-    icon?: typeof IconExclamationCircle;
+    icon?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {

package/dist/components/PasswordInput.svelte

@@ -5,10 +5,6 @@
   // 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';
@@ -41,7 +37,7 @@
       on:click={() => showPassword = !showPassword}
     >
       <img 
-        src={showPassword ? eyeOffIconUrl : eyeIconUrl}
+        src={showPassword ? '/icons/eye-off.svg' : '/icons/eye.svg'} 
         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-(--scrollbar-width)"}
+              "[&_[data-scroll-area-viewport]]:!pr-[var(--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-(--scrollbar-padding) " + 
+        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-[var(--scrollbar-padding)] " + 
                           "!bg-transparent border-none select-none touch-none " + 
                           "[&>div]:rounded-[var(--radius-pill)] [&>div]:cursor-pointer " + 
-                          "[&>div]:bg-[hsl(var(--grey1))] hover:[&>div]:bg-[hsl(var(--grey2))] " + 
+                          "[&>div]:bg-[hsl(var(--grey1))] [&>div]:hover: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 grow"></div>
+                      <div class="grid-sidebar-content grid-column flex-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

@@ -12,7 +12,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 { SearchInput } from './search-input';
+export { default as SearchInput } from './search-input/SearchInput.svelte';
 export { ShadEditor, type TipTapEditor, type TipTapEditorLevel } from './shad-editor';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';

package/dist/components/index.js

@@ -13,7 +13,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 { SearchInput } from './search-input';
+export { default as SearchInput } from './search-input/SearchInput.svelte';
 export { ShadEditor } from './shad-editor';
 export { ToasterModal, showToast } from './toast';
 export * as Accordion from './ui/accordion';

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/NewItemDialog.svelte

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

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

package/dist/components/modals/modalStore.js

@@ -1,33 +1,28 @@
 import { writable } from 'svelte/store';
 // import { browser } from '$app/environment';
+// Determine if running in browser (avoids reference errors during SSR)
 const browser = typeof window !== 'undefined';
-let showLogs = false;
-// Get initial state from localStorage if available
-const getInitialState = () => {
-    if (browser) {
-        const stored = localStorage.getItem('modal-state');
-        if (stored) {
-            const parsedState = JSON.parse(stored);
-            if (showLogs)
-                console.log('Restored modal state:', parsedState);
-            return parsedState;
-        }
-    }
-    return { isOpen: false };
-};
-// Create a store to track modal state
+// Debug flag – set to true when you need to trace modal behaviour
+const showLogs = false;
+/*
+ * NOTE: We intentionally **do not** persist modal state to `localStorage` anymore.
+ * Persisting the open state caused an issue where refreshing the page while a
+ * modal was open would restore (and immediately reopen) that modal on the next
+ * page load.  The new behaviour always starts with `isOpen: false`, ensuring a
+ * clean slate after any refresh.
+ */
+// Always start with a closed modal on fresh page loads
+const getInitialState = () => ({ isOpen: false });
+// Central writable store for runtime modal state
 export const modalState = writable(getInitialState());
-// Derived store for backward compatibility
+// Backwards-compatibility helper – exposes only the boolean flag
 export const isModalOpen = writable(getInitialState().isOpen);
-// Subscribe to changes and update localStorage
-if (browser) {
-    modalState.subscribe(state => {
-        if (showLogs)
-            console.log('Saving modal state:', state);
-        localStorage.setItem('modal-state', JSON.stringify(state));
-        isModalOpen.set(state.isOpen);
-    });
-}
+// Keep `isModalOpen` in sync (without persisting to localStorage)
+modalState.subscribe(state => {
+    if (showLogs)
+        console.log('Modal state updated:', state);
+    isModalOpen.set(state.isOpen);
+});
 // Helper functions to manage modal state
 export function openModal(modalType, data) {
     if (showLogs)
@@ -35,7 +30,7 @@ export function openModal(modalType, data) {
     modalState.set({
         isOpen: true,
         modalType,
-        data
+        data,
     });
 }
 export function closeModal() {

package/dist/components/navigation/Breadcrumbs.svelte

@@ -182,7 +182,7 @@
 >
   <!-- NAVIGATION BUTTONS -->
   {#if showNavigationButtons}
-    <div class="nav-buttons flex items-center shrink-0">
+    <div class="nav-buttons flex items-center flex-shrink-0">
       <!-- Left arrow -->
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
@@ -222,7 +222,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="shrink-0">
+          <Breadcrumb.Item class="flex-shrink-0">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <span 
               role="link"
@@ -241,10 +241,10 @@
           {#if !isLoading && currentPath.length > 0 && breadcrumbsPositioned}
             {#if shouldShowEllipsis && currentPath.length > itemsToShow}
               <!-- Breadcrumb Separator -->
-              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
+              <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
 
               <!-- Dropdown Menu for Ellipsis -->
-              <Breadcrumb.Item class="shrink-0">
+              <Breadcrumb.Item class="flex-shrink-0">
                 <DropdownMenu.Root>
                   <DropdownMenu.Trigger class="flex items-center gap-1 cursor-pointer">
                     <span class="h5 text-[hsl(var(--grey6))]">...</span>
@@ -269,8 +269,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))] shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="flex-shrink-0">
                   {#if index === itemsToShow - 2}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[currentPath.length - 1]}
@@ -293,8 +293,8 @@
               {/each}
             {:else}
               {#each currentPath as _, index}
-                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] shrink-0">/</Breadcrumb.Separator>
-                <Breadcrumb.Item class="shrink-0">
+                <Breadcrumb.Separator class="h5 text-[hsl(var(--grey6))] flex-shrink-0">/</Breadcrumb.Separator>
+                <Breadcrumb.Item class="flex-shrink-0">
                   {#if index === currentPath.length - 1}
                     <span class="h5 text-[hsl(var(--grey3))]">
                       {currentPathNames[index]}
@@ -323,7 +323,7 @@
   </div>
 
   {#if showDebugVisualizer}
-    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow-2xs">
+    <div class="absolute bottom-1 right-1 text-xs text-blue-600 bg-white px-1 rounded shadow">
       Available width: {Math.round(availableWidth)}px
       <br>
       Items to show: {itemsToShow}

package/dist/components/pdf/PDFViewer.svelte

@@ -3,10 +3,9 @@
   import { onMount, onDestroy, tick, afterUpdate, createEventDispatcher } from 'svelte';
 
   // Sveltekit imports
-  // import { browser } from '$app/environment';
-  const browser = typeof window !== 'undefined';
-  // import { base } from '$app/paths';
-  const base = '';
+  import { browser } from '$app/environment';
+  import { base } from '$app/paths';
+  
   // Local components imports
   import { WScrollArea } from '../../components';
   
@@ -543,19 +542,29 @@
     <!-- 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-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onPrevPage} disabled={pageNum <= 1}>
-          <IconChevronLeft
+        <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 
             class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
-            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 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-[hsl(var(--grey2))] transition-colors group disabled:cursor-not-allowed" on:click={onNextPage} disabled={pageNum >= pageCount}>
-          <IconChevronRight
+        <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 
             class="!text-[hsl(var(--grey5))] group-hover:!text-[hsl(var(--grey7))]"
-            style="height: 20px !important; min-width: 20px !important; max-width: 20px !important; max-height: 20px !important;"
+            style="width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important;"
           />
         </button>
       </div>

package/dist/components/search-input/SearchInput.svelte

@@ -10,8 +10,8 @@
  * - Uses Widgetic design system styling
  -->
 <script lang="ts">
-  // import { X, IconSearch } from '@widgetic/design-system/icons';
-  import { X, IconSearch } from '../../icons';
+  import { X, IconSearch } from '@widgetic/design-system/icons';
+
   /**
    * Placeholder text for the search input
    */
@@ -79,7 +79,7 @@
             onKeydown(e);
           }}
           onpaste={onPaste}
-          class="w-full h-[38px] border-0 bg-transparent focus:outline-hidden focus:ring-0 focus-visible:ring-0 pl-9 pr-8 subtext 
+          class="w-full h-[38px] border-0 bg-transparent focus:outline-none focus:ring-0 focus-visible:ring-0 pl-9 pr-8 subtext 
                 transition-all duration-300 
                 {value ? 'text-[hsl(var(--grey7))]' : 'text-[hsl(var(--grey3))] placeholder:text-[hsl(var(--grey3))] placeholder:transition-colors placeholder:duration-300 group-hover:text-[hsl(var(--grey7))] group-hover:placeholder:text-[hsl(var(--grey7))] group-focus-within:text-[hsl(var(--grey7))] group-focus-within:placeholder:text-[hsl(var(--grey7)))'} 
                 {inputClass}"
@@ -104,6 +104,11 @@
     transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease !important;
   }
   
+  input::-moz-placeholder {
+    -moz-transition: color 300ms ease !important;
+    transition: color 300ms ease !important;
+  }
+  
   input::placeholder {
     transition: color 300ms ease !important;
   }

package/dist/components/search-input/index.d.ts

@@ -1,3 +1,14 @@
-import SearchInput from './SearchInput.svelte';
-export { SearchInput };
-export default SearchInput;
+import { SvelteComponent } from 'svelte';
+
+export interface SearchInputProps {
+  placeholder?: string;
+  value?: string;
+  onInput?: (event: Event) => Promise<void> | void;
+  onKeydown?: (event: KeyboardEvent) => void;
+  onClear?: () => void;
+  onPaste?: (event: ClipboardEvent) => void;
+  containerClass?: string;
+  inputClass?: string;
+}
+
+export default class SearchInput extends SvelteComponent<SearchInputProps> {} 

package/dist/components/search-input/index.js

@@ -1,3 +1,4 @@
 import SearchInput from './SearchInput.svelte';
+
 export { SearchInput };
-export default SearchInput;
+export default SearchInput; 

package/dist/components/shad-editor/custom/image-extended-component.svelte

@@ -131,7 +131,7 @@
 			<input
 				value={node.attrs.title}
 				type="text"
-				class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-hidden"
+				class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-none"
 				onchange={(e) => {
 					if (e.target === null) return;
 					//@ts-ignore

package/dist/components/shad-editor/editor.css

@@ -1,14 +1,11 @@
-/* @config "../../../../tailwind.config.ts"; */
-@reference "../../styles/global.css";
-
 .tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
 	margin-top: 0 !important;
 	margin-bottom: 0 !important;
 }
 
 .tiptap code:not(pre code) {
-	/* Remove the before and after pseudo elements, replace rounded with rounded-sm */
-	@apply rounded-sm border bg-muted/50 p-1 before:content-[''] after:content-[''];
+	/* Remove the before and after pseudo elements */
+	@apply rounded border bg-muted/50 p-1 before:content-[''] after:content-[''];
 }
 
 .tiptap blockquote p {
@@ -57,7 +54,7 @@ ul[data-type='taskList'] li[data-checked='true'] div {
 }
 
 input[type='checkbox'] {
-	@apply !size-4 !cursor-pointer !rounded-sm;
+	@apply size-4 cursor-pointer rounded !important;
 }
 
 ul[data-type='taskList'] ul[data-type='taskList'] {
@@ -70,8 +67,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
 }
 
 .color::before {
-	/* Replace rounded with rounded-md */
-	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-md border border-muted align-middle;
+	@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded border border-muted align-middle;
 	background-color: var(--color);
 	content: ' ';
 }

package/dist/components/shad-editor/icons/table.svelte

@@ -70,7 +70,7 @@
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								onclick={() => editor.chain().focus().deleteRow().run()}
-								class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
+								class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
 							>
 								<span>Delete Row</span>
 							</DropdownMenu.Item>
@@ -89,7 +89,7 @@
 							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								onclick={() => editor.chain().focus().deleteColumn().run()}
-								class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
+								class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
 							>
 								<span>Delete</span>
 							</DropdownMenu.Item>
@@ -97,7 +97,7 @@
 					</DropdownMenu.Sub>
 					<DropdownMenu.Item
 						onclick={() => editor.chain().focus().deleteTable().run()}
-						class="text-destructive hover:text-foreground data-highlighted:bg-destructive"
+						class="text-destructive hover:text-foreground data-[highlighted]:bg-destructive"
 					>
 						<span>Delete</span>
 					</DropdownMenu.Item>

package/dist/components/shad-editor/icons/text.svelte

@@ -73,7 +73,7 @@
 					>
 						<Pilcrow /> Paragraph
 						{#if editor.isActive('paragraph')}
-							<Check class="absolute right-2 size-3! text-muted-foreground" />
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
 						{/if}
 					</DropdownMenu.Item>
 					<DropdownMenu.Item

package/dist/components/shad-editor/onedark.css

@@ -1,6 +1,3 @@
-/* @config "../../../../tailwind.config.ts"; */
-@reference "../../styles/global.css";
-
 /* One Dark and Light Theme for Highlight.js using Tailwind CSS */
 .tiptap pre code {
 	@apply text-[#383a42] dark:text-[#abb2bf];

package/dist/components/shad-editor/shad-editor.svelte

@@ -62,7 +62,7 @@
 			editorProps: {
 				attributes: {
 					class:
-						'm-auto p-2 focus:outline-hidden flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
+						'm-auto p-2 focus:outline-none flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
 				}
 			},
 			extensions: [