@widgetic/editor 3.11.4 → 4.0.2

package/dist/components/ic/VectorInputController.svelte.d.ts

@@ -0,0 +1,47 @@
+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 VectorInputController: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * @prop {string} label - Display label for the vector selector
+       * @prop {string} value - Currently selected vector
+       * @prop {Function} onChange - Callback when vector selection changes
+       * @prop {string} description - Optional help text
+       * @prop {string} controllerId - Unique identifier for this controller
+       * @prop {any} openDropdowns - Store tracking open dropdown states
+       * @prop {Function} toggleDropdown - Function to toggle dropdown state
+       * @prop {Function} onFocus - Optional focus handler
+       */ label: string;
+    value?: {
+        name: string;
+        category: string;
+        url: string;
+    } | null;
+    onChange?: ((newValue: {
+        name: string;
+        category: string;
+        url: string;
+    } | null) => void) | undefined;
+    description?: string | undefined;
+    controllerId: string;
+    openDropdowns: any;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+    hideRecentFromList?: boolean;
+    hideTrashIcon?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VectorInputController = InstanceType<typeof VectorInputController>;
+export default VectorInputController;

package/dist/components/ic/index.d.ts

@@ -0,0 +1,39 @@
+export { default as DropdownInputController } from './DropdownInputController.svelte';
+export { default as DatePickerInputController } from './DatePickerInputController.svelte';
+export { default as SliderInputController } from './SliderInputController.svelte';
+export { default as FontInputController } from './FontInputController.svelte';
+export { default as SwitchInputController } from './SwitchInputController.svelte';
+export { default as TextInputController } from './TextInputController.svelte';
+export { default as TextAreaInputController } from './TextAreaInputController.svelte';
+export { default as TextAreaPreviewInputController } from './TextAreaPreviewInputController.svelte';
+export { default as RangeCalendarInputController } from './RangeCalendarInputController.svelte';
+export { default as BrowserInputController } from './BrowserInputController.svelte';
+export { default as NumberInputController } from './NumberInputController.svelte';
+export { default as PositionInputController } from './PositionInputController.svelte';
+export { default as ColorPickerInputController } from './ColorPickerInputController.svelte';
+export { default as CheckboxInputController } from './CheckboxInputController.svelte';
+export { default as RadioGroupInputController } from './RadioGroupInputController.svelte';
+export { default as SliderRangeInputController } from './SliderRangeInputController.svelte';
+export { default as FixedPositionInputController } from './FixedPositionInputController.svelte';
+export { default as VectorInputController } from './VectorInputController.svelte';
+export { default as AngleInputController } from './AngleInputController.svelte';
+export { default as InputControllerHeader } from './InputControllerHeader.svelte';
+export { default as TimeInputController } from './TimeInputController.svelte';
+export { default as RoundedCornersInputController } from './RoundedCornersInputController.svelte';
+export { default as TagsInputController } from './TagsInputController.svelte';
+export { default as DateFieldInputController } from './DateFieldInputController.svelte';
+export interface InputControllerConfig {
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    fileTypes?: string[];
+    showOpacityControls?: boolean;
+    defaultTransparency?: number;
+    textColor?: string;
+    format?: string;
+}

package/dist/components/ic/index.js

@@ -0,0 +1,24 @@
+export { default as DropdownInputController } from './DropdownInputController.svelte';
+export { default as DatePickerInputController } from './DatePickerInputController.svelte';
+export { default as SliderInputController } from './SliderInputController.svelte';
+export { default as FontInputController } from './FontInputController.svelte';
+export { default as SwitchInputController } from './SwitchInputController.svelte';
+export { default as TextInputController } from './TextInputController.svelte';
+export { default as TextAreaInputController } from './TextAreaInputController.svelte';
+export { default as TextAreaPreviewInputController } from './TextAreaPreviewInputController.svelte';
+export { default as RangeCalendarInputController } from './RangeCalendarInputController.svelte';
+export { default as BrowserInputController } from './BrowserInputController.svelte';
+export { default as NumberInputController } from './NumberInputController.svelte';
+export { default as PositionInputController } from './PositionInputController.svelte';
+export { default as ColorPickerInputController } from './ColorPickerInputController.svelte';
+export { default as CheckboxInputController } from './CheckboxInputController.svelte';
+export { default as RadioGroupInputController } from './RadioGroupInputController.svelte';
+export { default as SliderRangeInputController } from './SliderRangeInputController.svelte';
+export { default as FixedPositionInputController } from './FixedPositionInputController.svelte';
+export { default as VectorInputController } from './VectorInputController.svelte';
+export { default as AngleInputController } from './AngleInputController.svelte';
+export { default as InputControllerHeader } from './InputControllerHeader.svelte';
+export { default as TimeInputController } from './TimeInputController.svelte';
+export { default as RoundedCornersInputController } from './RoundedCornersInputController.svelte';
+export { default as TagsInputController } from './TagsInputController.svelte';
+export { default as DateFieldInputController } from './DateFieldInputController.svelte';

package/dist/components/ic/shared/CategoryTabs.svelte

@@ -0,0 +1,40 @@
+<!--
+ * CategoryTabs Component
+ * A simplified, reusable component for displaying and switching between categories
+ * 
+ * Features:
+ * - Displays a list of categories as tabs
+ * - Handles category selection
+ * - Shows the active category with different styling
+ * - Uses Widgetic design system styling
+ -->
+<script lang="ts">
+  // Props
+  export let categories: any[] = [];
+  export let activeCategory: any = null;
+  export let onCategorySelect: (category: any) => void;
+  export let getCategoryKey: (category: any) => string = (cat) => cat?.toString() || '';
+  export let getCategoryLabel: (category: any) => string = (cat) => cat?.toString() || '';
+  export let filterVisible = true;
+</script>
+
+{#if filterVisible && categories.length > 0}
+  <div class="widgetic-colors widgetic-radius bg-white">
+    <div class="flex justify-between px-4 pt-[24px] pb-[8px] border-b border-grey2">
+      {#each categories as category, index}
+        {@const isActive = getCategoryKey(activeCategory) === getCategoryKey(category)}
+        <button 
+          type="button"
+          class="cursor-pointer caption transition-colors text-center {
+            isActive 
+              ? 'text-grey7' 
+              : 'text-grey3 hover:text-grey5'
+          }"
+          onclick={() => onCategorySelect(category)}
+        >
+          {getCategoryLabel(category)}
+        </button>
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/components/ic/shared/CategoryTabs.svelte.d.ts

@@ -0,0 +1,25 @@
+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 CategoryTabs: $$__sveltets_2_IsomorphicComponent<{
+    categories?: any[];
+    activeCategory?: any;
+    onCategorySelect: (category: any) => void;
+    getCategoryKey?: (category: any) => string;
+    getCategoryLabel?: (category: any) => string;
+    filterVisible?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CategoryTabs = InstanceType<typeof CategoryTabs>;
+export default CategoryTabs;

package/dist/components/ic/shared/ItemGrid.svelte

@@ -0,0 +1,181 @@
+<!--
+ * ItemGrid Component
+ * A reusable grid component for displaying items
+ * 
+ * Features:
+ * - Displays a grid of items
+ * - Infinite scrolling to load more items
+ * - Handles item selection
+ * - Supports custom item rendering
+ * - Optimized with intersection observer
+ -->
+<script lang="ts">
+  import { Check } from '@widgetic/design-system/icons';
+  
+  export let items: any[] = [];
+  export let containerRef: (node: HTMLElement) => void;
+  export let onItemSelect: (item: any) => void;
+  export let isItemSelected: (item: any) => boolean;
+  export let renderItem: (item: any) => { html: string } | string;
+  export let getItemKey: (item: any) => string;
+  export let observeItem: ((node: HTMLElement) => { destroy: () => void }) | undefined = undefined;
+  export let loadingMore = false;
+  export let hasMoreItems = false;
+  export let loadNextBatch: () => void;
+  export let layoutClass = "grid-cols-1";
+  export let itemType: 'vector' | 'font' = 'vector';
+  
+  // Handle scroll to load more items
+  function handleScroll(e: Event) {
+    const target = e.target as HTMLElement;
+    if (
+      !loadingMore && 
+      hasMoreItems && 
+      target.scrollHeight - target.scrollTop <= target.clientHeight + 200
+    ) {
+      loadNextBatch();
+    }
+  }
+
+  // Render content based on the item
+  function renderContent(item: any) {
+    const rendered = renderItem(item);
+    if (typeof rendered === 'string') {
+      return `<span>${rendered}</span>`;
+    }
+    
+    if (rendered && typeof rendered === 'object' && 'html' in rendered) {
+      return rendered.html;
+    }
+    
+    return '';
+  }
+</script>
+
+<div 
+  class="flex-1 overflow-y-auto px-4 widgetic-colors"
+  use:containerRef
+  onscroll={handleScroll}
+>
+  <div class="grid {layoutClass} gap-x-6 gap-y-4 pb-4">
+    {#each items as item (getItemKey(item))}
+      {#if itemType === 'vector'}
+        {#if observeItem}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div 
+            class="flex items-center justify-center widgetic-radius rounded hover:bg-light-green transition-colors cursor-pointer w-[98px] h-[96px] border-2 border-grey2"
+            class:bg-sage-green={isItemSelected(item)}
+            class:text-white={isItemSelected(item)}
+            class:border-sage-green={isItemSelected(item)}
+            class:selected-item={isItemSelected(item)}
+            onclick={() => onItemSelect(item)}
+            use:observeItem
+            data-item={getItemKey(item)}
+            data-grid-item
+            data-item-type="vector"
+          >
+            <div class="relative w-full h-full flex items-center justify-center">
+              {@html renderContent(item)}
+            </div>
+          </div>
+        {:else}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div 
+            class="flex items-center justify-center widgetic-radius rounded hover:bg-light-green transition-colors cursor-pointer w-[98px] h-[96px] border-2 border-grey2"
+            class:bg-sage-green={isItemSelected(item)}
+            class:text-white={isItemSelected(item)}
+            class:border-sage-green={isItemSelected(item)}
+            class:selected-item={isItemSelected(item)}
+            onclick={() => onItemSelect(item)}
+            data-item={getItemKey(item)}
+            data-grid-item
+            data-item-type="vector"
+          >
+            <div class="relative w-full h-full flex items-center justify-center">
+              {@html renderContent(item)}
+            </div>
+          </div>
+        {/if}
+      {:else}
+        {#if observeItem}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div 
+            class="w-full py-2 px-4 hover:bg-light-green cursor-pointer overflow-hidden relative rounded-small"
+            class:bg-sage-green={isItemSelected(item)}
+            class:text-white={isItemSelected(item)}
+            class:selected-item={isItemSelected(item)}
+            onclick={() => onItemSelect(item)}
+            use:observeItem
+            data-item={getItemKey(item)}
+            data-item-type="font"
+          >
+            <div class="flex items-center flex-1 min-w-0 group">
+              <Check class="mr-2 h-6 w-6 flex-shrink-0 {isItemSelected(item) ? 'text-white' : 'text-sage-green opacity-0'}"/>
+              <div class="flex-1 overflow-hidden">
+                {@html renderContent(item)}
+              </div>
+            </div>
+          </div>
+        {:else}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div 
+            class="w-full py-2 px-4 hover:bg-light-green cursor-pointer overflow-hidden relative rounded-small"
+            class:bg-sage-green={isItemSelected(item)}
+            class:text-white={isItemSelected(item)}
+            class:selected-item={isItemSelected(item)}
+            onclick={() => onItemSelect(item)}
+            data-item={getItemKey(item)}
+            data-item-type="font"
+          >
+            <div class="flex items-center flex-1 min-w-0 group">
+              <Check class="mr-2 h-6 w-6 flex-shrink-0 {isItemSelected(item) ? 'text-white' : 'text-sage-green opacity-0'}"/>
+              <div class="flex-1 overflow-hidden">
+                {@html renderContent(item)}
+              </div>
+            </div>
+          </div>
+        {/if}
+      {/if}
+    {/each}
+  </div>
+
+  {#if loadingMore}
+    <div class="py-4 subtext text-center text-grey5">
+      Loading more items...
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Prevent hover effect on selected items */
+  :global(.selected-item:hover) {
+    background-color: hsl(var(--sage-green)) !important;
+    color: white !important;
+  }
+  
+  /* Ensure text is white in selected items */
+  :global(.selected-item) {
+    color: white !important;
+  }
+  
+  /* Keep the grid styling for font items */
+  :global([data-item-type="font"]) {
+    height: 42px !important;
+  }
+  
+  /* Specific styling for grid font items */
+  :global([data-grid-item][data-item-type="font"]) {
+    width: 98px !important;
+    height: 42px !important;
+    border: 2px solid hsl(var(--grey2)) !important;
+    border-radius: var(--radius-large) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 0 !important;
+  }
+</style> 

package/dist/components/ic/shared/ItemGrid.svelte.d.ts

@@ -0,0 +1,35 @@
+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 ItemGrid: $$__sveltets_2_IsomorphicComponent<{
+    items?: any[];
+    containerRef: (node: HTMLElement) => void;
+    onItemSelect: (item: any) => void;
+    isItemSelected: (item: any) => boolean;
+    renderItem: (item: any) => {
+        html: string;
+    } | string;
+    getItemKey: (item: any) => string;
+    observeItem?: ((node: HTMLElement) => {
+        destroy: () => void;
+    }) | undefined;
+    loadingMore?: boolean;
+    hasMoreItems?: boolean;
+    loadNextBatch: () => void;
+    layoutClass?: string;
+    itemType?: "vector" | "font";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ItemGrid = InstanceType<typeof ItemGrid>;
+export default ItemGrid;

package/dist/components/ic/shared/RecentItemsSection.svelte

@@ -0,0 +1,260 @@
+<!--
+ * RecentItemsSection Component
+ * Displays recently used items with custom rendering
+ * 
+ * Features:
+ * - Displays recently used items
+ * - Supports custom item rendering
+ * - Handles item selection
+ * - Supports deletion of custom items
+ * - Supports list or grid display modes
+ -->
+<script lang="ts">
+  // Import Check icon from design system
+  import { Check } from '@widgetic/design-system/icons';
+  import icTrash from '../../../assets/icons/ic-browser/trash.svg?url';
+  
+  export let recentItems: any[] = [];
+  export let title = "Recently used";
+  export let onItemSelect: (item: any) => void;
+  export let onItemDelete: (item: any, event: Event) => void;
+  export let isItemSelected: (item: any) => boolean;
+  export let renderItem: (item: any) => { html: string } | string;
+  export let isCustomItem: (item: any) => boolean;
+  export let getItemKey: (item: any) => string;
+  export let observeItem: ((node: HTMLElement) => { destroy: () => void }) | undefined = undefined;
+  export let displayMode: 'list' | 'grid' = 'list';
+  export let hideTrashIcon: boolean = false;
+  export let itemType: 'font' | 'vector' = 'font';
+  
+  // Helper function to determine if the result has HTML content
+  function hasHtml(result: { html: string } | string): result is { html: string } {
+    return typeof result === 'object' && result !== null && 'html' in result;
+  }
+</script>
+
+{#if recentItems.length > 0}
+  <div class="px-4 pt-4 pb-4 widgetic-colors">
+    <h5 class="subtext text-grey7">{title}</h5>
+    
+    {#if displayMode === 'list'}
+      <div class="grid grid-cols-1">
+        {#each recentItems as item (getItemKey(item))}
+          {@const renderedItem = renderItem(item)}
+          {@const selected = isItemSelected(item)}
+          
+          {#if observeItem}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              class="w-full px-4 cursor-pointer overflow-hidden relative rounded-small"
+              class:bg-sage-green={selected}
+              class:text-white={selected}
+              class:hover:bg-light-green={!selected}
+              class:selected-item={selected}
+              onclick={() => onItemSelect(item)}
+              use:observeItem
+              data-item={getItemKey(item)}
+            >
+              <div class="flex items-center flex-1 min-w-0 group">
+                <Check class="mr-2 h-6 w-6 flex-shrink-0 {selected ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                <div class="flex-1 overflow-hidden">
+                  {#if typeof renderedItem === 'string'}
+                    <span class="text-[24px]">{renderedItem}</span>
+                  {:else if hasHtml(renderedItem)}
+                    {@html renderedItem.html}
+                  {/if}
+                </div>
+                
+                {#if isCustomItem(item) && !hideTrashIcon}
+                  <button 
+                    type="button"
+                    class="p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors"
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      onItemDelete(item, e);
+                    }}
+                  >
+                    <img src={icTrash} alt="Delete" class="w-4 h-4" />
+                  </button>
+                {/if}
+              </div>
+            </div>
+          {:else}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              class="w-full px-4 cursor-pointer overflow-hidden relative rounded-small"
+              class:bg-sage-green={selected}
+              class:text-white={selected}
+              class:hover:bg-light-green={!selected}
+              class:selected-item={selected}
+              onclick={() => onItemSelect(item)}
+              data-item={getItemKey(item)}
+            >
+              <div class="flex items-center flex-1 min-w-0 group">
+                <Check class="mr-2 h-6 w-6 flex-shrink-0 {selected ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                <div class="flex-1 overflow-hidden">
+                  {#if typeof renderedItem === 'string'}
+                    <span class="text-[24px]">{renderedItem}</span>
+                  {:else if hasHtml(renderedItem)}
+                    {@html renderedItem.html}
+                  {/if}
+                </div>
+                
+                {#if isCustomItem(item) && !hideTrashIcon}
+                  <button 
+                    type="button"
+                    class="p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors"
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      onItemDelete(item, e);
+                    }}
+                  >
+                    <img src={icTrash} alt="Delete" class="w-4 h-4" />
+                  </button>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    {:else}
+      <div class="grid grid-cols-3 gap-x-6 gap-y-4 pt-2 pb-0">
+        {#each recentItems as item (getItemKey(item))}
+          {@const renderedItem = renderItem(item)}
+          {@const selected = isItemSelected(item)}
+          
+          {#if observeItem}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              class="flex-shrink-0 flex items-center justify-center widgetic-radius rounded transition-colors cursor-pointer border-2 border-grey2"
+              class:bg-sage-green={selected}
+              class:text-white={selected}
+              class:border-sage-green={selected}
+              class:hover:bg-light-green={!selected}
+              class:selected-item={selected}
+              onclick={() => onItemSelect(item)}
+              use:observeItem
+              data-item={getItemKey(item)}
+              data-grid-item
+              data-item-type={itemType}
+            >
+              <div class="relative w-full h-full flex items-center justify-center">
+                {#if typeof renderedItem === 'string'}
+                  <span class="text-[24px]">{renderedItem}</span>
+                {:else if hasHtml(renderedItem)}
+                  {@html renderedItem.html}
+                {/if}
+                
+                {#if isCustomItem(item) && !hideTrashIcon}
+                  <button 
+                    type="button"
+                    class="absolute top-1 right-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      onItemDelete(item, e);
+                    }}
+                  >
+                    <img src={icTrash} alt="Delete" class="w-3 h-3" />
+                  </button>
+                {/if}
+              </div>
+            </div>
+          {:else}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div 
+              class="flex-shrink-0 flex items-center justify-center widgetic-radius rounded transition-colors cursor-pointer border-2 border-grey2"
+              class:bg-sage-green={selected}
+              class:text-white={selected}
+              class:border-sage-green={selected}
+              class:hover:bg-light-green={!selected}
+              class:selected-item={selected}
+              onclick={() => onItemSelect(item)}
+              data-item={getItemKey(item)}
+              data-grid-item
+              data-item-type={itemType}
+            >
+              <div class="relative w-full h-full flex items-center justify-center">
+                {#if typeof renderedItem === 'string'}
+                  <span class="text-[24px]">{renderedItem}</span>
+                {:else if hasHtml(renderedItem)}
+                  {@html renderedItem.html}
+                {/if}
+                
+                {#if isCustomItem(item) && !hideTrashIcon}
+                  <button 
+                    type="button"
+                    class="absolute top-1 right-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
+                    onclick={(e) => {
+                      e.stopPropagation();
+                      onItemDelete(item, e);
+                    }}
+                  >
+                    <img src={icTrash} alt="Delete" class="w-3 h-3" />
+                  </button>
+                {/if}
+              </div>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  /* Override the global styles for data-item when in list mode */
+  :global([data-item]:not([data-grid-item])) {
+    width: auto !important;
+    height: 42px !important;
+    border: none !important;
+    border-radius: var(--radius-small) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    padding: 8px 16px !important;
+  }
+  
+  /* Keep the grid styling for font items */
+  :global([data-grid-item][data-item-type="font"]) {
+    width: 98px !important;
+    height: 42px !important;
+    border: 2px solid hsl(var(--grey2)) !important;
+    border-radius: var(--radius-large) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 0 !important;
+  }
+  
+  /* Specific styling for vector items */
+  :global([data-grid-item][data-item-type="vector"]) {
+    width: 98px !important;
+    height: 96px !important;
+    border: 2px solid hsl(var(--grey2)) !important;
+    border-radius: var(--radius-large) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: 0 !important;
+  }
+  
+  :global([data-grid-item].bg-\[hsl\(var\(--sage-green\)\)\]) {
+    border-color: hsl(var(--sage-green)) !important;
+    background-color: hsl(var(--sage-green)) !important;
+    color: white !important;
+  }
+  
+  :global([data-grid-item]:not(.bg-\[hsl\(var\(--sage-green\)\)\]):hover) {
+    background-color: hsl(var(--light-green)) !important;
+  }
+  
+  /* Prevent hover effect on selected items */
+  :global(.selected-item:hover) {
+    background-color: hsl(var(--sage-green)) !important;
+  }
+  
+</style>