@miozu/jera 0.3.0 → 0.4.2

package/src/components/navigation/blocks/NavigationSection.svelte

@@ -0,0 +1,230 @@
+<!--
+  @component NavigationSection
+
+  Enterprise navigation section block with recursive item support.
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { slide, fly } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { SIDEBAR_CONTEXT_KEY } from '../../../utils/sidebar.svelte.js';
+  import { NAVIGATION_CONTEXT_KEY } from '../../../utils/navigation.svelte.js';
+  import SidebarNavigationItem from '../SidebarNavigationItem.svelte';
+
+  let {
+    block,
+    navigationState = null,
+    onEvent = null
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const navContext = getContext(NAVIGATION_CONTEXT_KEY);
+  const navState = navigationState || navContext;
+
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  // Block configuration with defaults
+  const config = $derived({
+    title: block.title || '',
+    collapsible: block.collapsible ?? true,
+    defaultExpanded: block.defaultExpanded ?? true,
+    showCount: block.showCount ?? true,
+    maxDepth: block.maxDepth ?? 10,
+    searchable: block.searchable ?? true,
+    ...block.config
+  });
+
+  // Items from block configuration
+  const items = $derived(block.items || []);
+
+  // Filter items if searchable and search is active
+  const filteredItems = $derived.by(() => {
+    if (!config.searchable || !navState?.searchQuery) return items;
+    return navState.filteredItems.filter(item =>
+      items.some(blockItem => blockItem.id === item.id)
+    );
+  });
+
+  // Section expansion state
+  const sectionId = block.id;
+  const isExpanded = $derived(
+    config.collapsible
+      ? (navState?.isSectionExpanded(sectionId) ?? config.defaultExpanded)
+      : true
+  );
+
+  function toggleSection() {
+    if (!config.collapsible) return;
+
+    if (navState) {
+      navState.toggleSection(sectionId);
+    }
+
+    if (onEvent) {
+      onEvent('section_toggled', { sectionId, expanded: !isExpanded });
+    }
+  }
+
+  function handleItemNavigate(item, event) {
+    if (onEvent) {
+      const result = onEvent('item_navigate', { item, event });
+      if (result === false) return false;
+    }
+
+    return true; // Continue with default navigation
+  }
+
+  function handleItemToggle(item, expanded) {
+    if (onEvent) {
+      onEvent('item_toggled', { item, expanded });
+    }
+  }
+</script>
+
+<div class="nav-section-block">
+  {#if config.title && !isCollapsed}
+    <button
+      class="section-header"
+      class:collapsible={config.collapsible}
+      onclick={toggleSection}
+      disabled={!config.collapsible}
+      aria-expanded={config.collapsible ? isExpanded : undefined}
+    >
+      <span class="section-title">{config.title}</span>
+
+      {#if config.showCount && filteredItems.length > 0}
+        <span class="section-count">{filteredItems.length}</span>
+      {/if}
+
+      {#if config.collapsible}
+        <svg
+          class="section-chevron {isExpanded ? 'expanded' : 'collapsed'}"
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      {/if}
+    </button>
+  {:else if config.title && isCollapsed}
+    <div class="section-divider" title={config.title}></div>
+  {/if}
+
+  {#if isExpanded}
+    <ul
+      class="section-items"
+      transition:slide={{ duration: 200, easing: cubicOut }}
+    >
+      {#each filteredItems as item (item.id)}
+        <SidebarNavigationItem
+          {item}
+          {navigationState}
+          maxDepth={config.maxDepth}
+          onNavigate={handleItemNavigate}
+          onToggle={handleItemToggle}
+        />
+      {/each}
+
+      {#if filteredItems.length === 0 && items.length > 0}
+        <li class="no-results">
+          <div class="no-results-content">
+            <span class="no-results-text">No matching items</span>
+          </div>
+        </li>
+      {/if}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .nav-section-block {
+    margin-bottom: var(--nav-block-spacing, 0.5rem);
+  }
+
+  .section-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-muted, var(--color-base04, #737E99));
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    justify-content: flex-start;
+    transition: all var(--nav-transition-duration, 200ms) var(--nav-transition-easing, ease);
+    cursor: default;
+  }
+
+  .section-header.collapsible {
+    cursor: pointer;
+  }
+
+  .section-header.collapsible:hover {
+    color: var(--color-text, var(--color-base05, #D0D2DB));
+  }
+
+  .section-title {
+    flex: 1;
+    text-align: left;
+  }
+
+  .section-count {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    background: var(--color-surface-alt, var(--color-base02, #3E4359));
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
+  .section-chevron {
+    color: var(--color-text-muted, var(--color-base04, #737E99));
+    transition: all var(--nav-transition-duration, 200ms) var(--nav-transition-easing, ease);
+    flex-shrink: 0;
+  }
+
+  .section-chevron.expanded {
+    transform: rotate(180deg);
+  }
+
+  .section-divider {
+    margin: 0.5rem 0.75rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-base03, #565E78) 30%, transparent);
+    height: 1px;
+  }
+
+  .section-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .no-results {
+    list-style: none;
+  }
+
+  .no-results-content {
+    padding: 1rem 0.75rem;
+    text-align: center;
+  }
+
+  .no-results-text {
+    font-size: 0.875rem;
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    font-style: italic;
+  }
+</style>

package/src/components/navigation/index.js

@@ -0,0 +1,22 @@
+/**
+ * Navigation Components
+ *
+ * Reusable navigation components including sidebars, tabs, and accordions.
+ */
+
+// Sidebar Components
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as SidebarSection } from './SidebarSection.svelte';
+export { default as SidebarItem } from './SidebarItem.svelte';
+export { default as SidebarGroup } from './SidebarGroup.svelte';
+export { default as SidebarPopover } from './SidebarPopover.svelte';
+export { default as SidebarAccountItem } from './SidebarAccountItem.svelte';
+export { default as SidebarToggle } from './SidebarToggle.svelte';
+
+// Enterprise Components
+export { default as WorkspaceMenu } from './WorkspaceMenu.svelte';
+
+// Other Navigation Components
+export { default as Tabs } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';

package/src/components/overlays/ConfirmDialog.svelte

@@ -49,28 +49,28 @@
 
   const variantConfig = $derived({
     danger: {
-      iconColor: 'var(--color-error)',
-      iconBg: 'color-mix(in srgb, var(--color-error) 10%, transparent)',
+      iconColor: 'var(--color-base08)',
+      iconBg: 'color-mix(in srgb, var(--color-base08) 10%, transparent)',
       buttonVariant: 'danger'
     },
     warning: {
-      iconColor: 'var(--color-warning)',
-      iconBg: 'color-mix(in srgb, var(--color-warning) 10%, transparent)',
+      iconColor: 'var(--color-base0A)',
+      iconBg: 'color-mix(in srgb, var(--color-base0A) 10%, transparent)',
       buttonVariant: 'primary'
     },
     success: {
-      iconColor: 'var(--color-success)',
-      iconBg: 'color-mix(in srgb, var(--color-success) 10%, transparent)',
+      iconColor: 'var(--color-base0B)',
+      iconBg: 'color-mix(in srgb, var(--color-base0B) 10%, transparent)',
       buttonVariant: 'success'
     },
     info: {
-      iconColor: 'var(--color-primary)',
-      iconBg: 'color-mix(in srgb, var(--color-primary) 10%, transparent)',
+      iconColor: 'var(--color-base0D)',
+      iconBg: 'color-mix(in srgb, var(--color-base0D) 10%, transparent)',
       buttonVariant: 'primary'
     }
   }[variant] || {
-    iconColor: 'var(--color-primary)',
-    iconBg: 'color-mix(in srgb, var(--color-primary) 10%, transparent)',
+    iconColor: 'var(--color-base0D)',
+    iconBg: 'color-mix(in srgb, var(--color-base0D) 10%, transparent)',
     buttonVariant: 'primary'
   });
 
@@ -179,14 +179,14 @@
     content: '';
     position: absolute;
     inset: 0;
-    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
+    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
     backdrop-filter: blur(8px);
   }
 
   .confirm-dialog {
     position: relative;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border-muted);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-2xl);
     width: 100%;
@@ -214,14 +214,14 @@
     background: transparent;
     border: none;
     border-radius: var(--radius-lg);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     cursor: pointer;
     transition: background 0.15s ease, color 0.15s ease;
   }
 
   .confirm-close:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text);
+    background: var(--color-base02);
+    color: var(--color-base05);
   }
 
   .confirm-content {
@@ -253,13 +253,13 @@
     margin: 0 0 var(--space-2) 0;
     font-size: var(--text-lg);
     font-weight: 600;
-    color: var(--color-text-strong);
+    color: var(--color-base07);
   }
 
   .confirm-message {
     margin: 0;
     font-size: var(--text-sm);
-    color: var(--color-text-muted);
+    color: var(--color-base04);
     line-height: 1.5;
   }
 

package/src/components/overlays/Dropdown.svelte

@@ -77,8 +77,8 @@
     z-index: 50;
     min-width: 10rem;
     padding: var(--space-1);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
+    background: var(--color-base00);
+    border: 1px solid var(--color-base03);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
     animation: dropdown-enter 0.15s ease-out;

package/src/components/overlays/DropdownDivider.svelte

@@ -18,6 +18,6 @@
   .dropdown-divider {
     height: 1px;
     margin: var(--space-1) 0;
-    background: var(--color-border-muted);
+    background: var(--color-base02);
   }
 </style>

package/src/components/overlays/DropdownItem.svelte

@@ -54,7 +54,7 @@
     padding: var(--space-2) var(--space-3);
     font-size: var(--text-sm);
     text-align: left;
-    color: var(--color-text);
+    color: var(--color-base05);
     background: transparent;
     border: none;
     border-radius: var(--radius-md);
@@ -63,12 +63,12 @@
   }
 
   .dropdown-item:hover:not(:disabled) {
-    background: var(--color-surface-hover);
+    background: var(--color-base02);
   }
 
   .dropdown-item:focus-visible {
     outline: none;
-    background: var(--color-surface-hover);
+    background: var(--color-base02);
   }
 
   .dropdown-item-disabled {
@@ -77,11 +77,11 @@
   }
 
   .dropdown-item-danger {
-    color: var(--color-error);
+    color: var(--color-base08);
   }
 
   .dropdown-item-danger:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--color-error) 10%, transparent);
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
   }
 
   .dropdown-item-icon {

package/src/components/overlays/Modal.svelte

@@ -33,11 +33,11 @@
 
   // Variant styles for the icon container
   const iconVariants = {
-    default: { bg: 'var(--color-surface-alt)', color: 'var(--color-text)' },
-    danger: { bg: 'color-mix(in srgb, var(--color-error) 10%, transparent)', color: 'var(--color-error)' },
-    warning: { bg: 'color-mix(in srgb, var(--color-warning) 10%, transparent)', color: 'var(--color-warning)' },
-    success: { bg: 'color-mix(in srgb, var(--color-success) 10%, transparent)', color: 'var(--color-success)' },
-    info: { bg: 'color-mix(in srgb, var(--color-info) 10%, transparent)', color: 'var(--color-info)' }
+    default: { bg: 'var(--color-base02)', color: 'var(--color-base05)' },
+    danger: { bg: 'color-mix(in srgb, var(--color-base08) 10%, transparent)', color: 'var(--color-base08)' },
+    warning: { bg: 'color-mix(in srgb, var(--color-base0A) 10%, transparent)', color: 'var(--color-base0A)' },
+    success: { bg: 'color-mix(in srgb, var(--color-base0B) 10%, transparent)', color: 'var(--color-base0B)' },
+    info: { bg: 'color-mix(in srgb, var(--color-base0D) 10%, transparent)', color: 'var(--color-base0D)' }
   };
 
   const iconStyle = $derived(iconVariants[variant] || iconVariants.default);
@@ -134,16 +134,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
+    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
     backdrop-filter: blur(4px);
   }
 
   .modal {
     position: relative;
-    background: var(--color-surface);
+    background: var(--color-base01);
     border-radius: 0.75rem;
     box-shadow: var(--shadow-2xl);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-base03);
     margin: 1rem;
     animation: modal-enter 0.2s ease-out;
   }
@@ -163,14 +163,14 @@
     background: transparent;
     border: none;
     border-radius: 0.5rem;
-    color: var(--color-text);
+    color: var(--color-base05);
     cursor: pointer;
     transition: background 0.15s, color 0.15s;
   }
 
   .modal-close:hover {
-    background: var(--color-surface-alt);
-    color: var(--color-text-strong);
+    background: var(--color-base02);
+    color: var(--color-base07);
   }
 
   .modal-content {
@@ -202,13 +202,13 @@
     margin: 0 0 0.5rem 0;
     font-size: 1.125rem;
     font-weight: 600;
-    color: var(--color-text-strong);
+    color: var(--color-base07);
     line-height: 1.4;
   }
 
   .modal-body {
     font-size: 0.875rem;
-    color: var(--color-text);
+    color: var(--color-base05);
     line-height: 1.5;
   }
 

package/src/components/overlays/Popover.svelte

@@ -192,13 +192,13 @@
     max-width: 18rem;
     width: max-content;
     padding: 0.5rem 0.75rem;
-    background: var(--color-surface);
-    color: var(--color-text-strong);
+    background: var(--color-base01);
+    color: var(--color-base07);
     font-size: 0.875rem;
     line-height: 1.5;
     border-radius: 0.5rem;
     box-shadow: var(--shadow-lg);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-base03);
     pointer-events: auto;
     word-wrap: break-word;
     hyphens: auto;

package/src/components/primitives/Avatar.svelte

@@ -36,20 +36,20 @@
 
   // Generate consistent color from name
   const bgColor = $derived.by(() => {
-    if (!name) return 'var(--color-border)';
+    if (!name) return 'var(--color-base03)';
     let hash = 0;
     for (let i = 0; i < name.length; i++) {
       hash = name.charCodeAt(i) + ((hash << 5) - hash);
     }
     const colors = [
-      'var(--color-error)',     // red
+      'var(--color-base08)',     // red
       'var(--orange)',          // orange
-      'var(--color-success)',   // green
-      'var(--color-warning)',   // yellow
-      'var(--color-info)',      // blue
-      'var(--color-primary)',   // magenta
+      'var(--color-base0B)',   // green
+      'var(--color-base0A)',   // yellow
+      'var(--color-base0D)',      // blue
+      'var(--color-base0D)',   // magenta
       'var(--peach)',           // peach
-      'var(--color-accent)'     // cyan
+      'var(--color-base0E)'     // cyan
     ];
     return colors[Math.abs(hash) % colors.length];
   });
@@ -122,11 +122,11 @@
     min-width: 8px;
     min-height: 8px;
     border-radius: 50%;
-    border: 2px solid var(--color-bg);
+    border: 2px solid var(--color-base00);
   }
 
-  .avatar-status-online { background: var(--color-success); }
-  .avatar-status-offline { background: var(--color-text-muted); }
-  .avatar-status-busy { background: var(--color-error); }
-  .avatar-status-away { background: var(--color-warning); }
+  .avatar-status-online { background: var(--color-base0B); }
+  .avatar-status-offline { background: var(--color-base04); }
+  .avatar-status-busy { background: var(--color-base08); }
+  .avatar-status-away { background: var(--color-base0A); }
 </style>

package/src/components/primitives/Badge.svelte

@@ -32,13 +32,13 @@
 
     variants: {
       variant: {
-        default: 'bg-[var(--color-surface-alt)] text-[var(--color-text)]',
-        primary: 'bg-[color-mix(in_srgb,var(--color-primary)_15%,transparent)] text-[var(--color-primary)]',
-        secondary: 'bg-[color-mix(in_srgb,var(--color-secondary)_15%,transparent)] text-[var(--color-secondary)]',
-        success: 'bg-[color-mix(in_srgb,var(--color-success)_15%,transparent)] text-[var(--color-success)]',
-        warning: 'bg-[color-mix(in_srgb,var(--color-warning)_15%,transparent)] text-[var(--color-warning)]',
-        error: 'bg-[color-mix(in_srgb,var(--color-error)_15%,transparent)] text-[var(--color-error)]',
-        info: 'bg-[color-mix(in_srgb,var(--color-info)_15%,transparent)] text-[var(--color-info)]'
+        default: 'bg-[var(--color-base02)] text-[var(--color-base05)]',
+        primary: 'bg-[color-mix(in_srgb,var(--color-base0D)_15%,transparent)] text-[var(--color-base0D)]',
+        secondary: 'bg-[color-mix(in_srgb,var(--color-base0C)_15%,transparent)] text-[var(--color-base0C)]',
+        success: 'bg-[color-mix(in_srgb,var(--color-base0B)_15%,transparent)] text-[var(--color-base0B)]',
+        warning: 'bg-[color-mix(in_srgb,var(--color-base0A)_15%,transparent)] text-[var(--color-base0A)]',
+        error: 'bg-[color-mix(in_srgb,var(--color-base08)_15%,transparent)] text-[var(--color-base08)]',
+        info: 'bg-[color-mix(in_srgb,var(--color-base0D)_15%,transparent)] text-[var(--color-base0D)]'
       },
 
       size: {