@miozu/jera 0.0.2 → 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

@@ -0,0 +1,272 @@
+<!--
+  @component ConfirmDialog
+
+  A confirmation dialog with semantic variants.
+
+  @example Danger confirmation
+  <ConfirmDialog
+    bind:open={showDelete}
+    title="Delete Item"
+    message="Are you sure you want to delete this item? This action cannot be undone."
+    variant="danger"
+    confirmText="Delete"
+    onconfirm={handleDelete}
+  />
+
+  @example Warning confirmation
+  <ConfirmDialog
+    bind:open={showWarning}
+    title="Unsaved Changes"
+    message="You have unsaved changes. Are you sure you want to leave?"
+    variant="warning"
+    confirmText="Leave"
+    cancelText="Stay"
+  />
+
+  @example With custom icon
+  <ConfirmDialog bind:open={show} title="Confirm">
+    {#snippet icon()}
+      <CustomIcon size={24} />
+    {/snippet}
+  </ConfirmDialog>
+-->
+<script>
+  import Button from '../primitives/Button.svelte';
+  import { escapeKey } from '../../actions/index.js';
+
+  let {
+    open = $bindable(false),
+    title = 'Confirm Action',
+    message = 'Are you sure you want to proceed?',
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    variant = 'danger',
+    class: className = '',
+    icon,
+    onconfirm,
+    oncancel
+  } = $props();
+
+  const variantConfig = $derived({
+    danger: {
+      iconColor: 'var(--color-base08)',
+      iconBg: 'color-mix(in srgb, var(--color-base08) 10%, transparent)',
+      buttonVariant: 'danger'
+    },
+    warning: {
+      iconColor: 'var(--color-base0A)',
+      iconBg: 'color-mix(in srgb, var(--color-base0A) 10%, transparent)',
+      buttonVariant: 'primary'
+    },
+    success: {
+      iconColor: 'var(--color-base0B)',
+      iconBg: 'color-mix(in srgb, var(--color-base0B) 10%, transparent)',
+      buttonVariant: 'success'
+    },
+    info: {
+      iconColor: 'var(--color-base0D)',
+      iconBg: 'color-mix(in srgb, var(--color-base0D) 10%, transparent)',
+      buttonVariant: 'primary'
+    }
+  }[variant] || {
+    iconColor: 'var(--color-base0D)',
+    iconBg: 'color-mix(in srgb, var(--color-base0D) 10%, transparent)',
+    buttonVariant: 'primary'
+  });
+
+  function handleConfirm() {
+    onconfirm?.();
+    open = false;
+  }
+
+  function handleCancel() {
+    oncancel?.();
+    open = false;
+  }
+
+  function handleBackdropClick(e) {
+    if (e.target === e.currentTarget) {
+      handleCancel();
+    }
+  }
+</script>
+
+{#if open}
+  <div
+    class="confirm-backdrop {className}"
+    onclick={handleBackdropClick}
+    use:escapeKey={handleCancel}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="confirm-title"
+  >
+    <div class="confirm-dialog">
+      <button
+        type="button"
+        class="confirm-close"
+        onclick={handleCancel}
+        aria-label="Close"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+
+      <div class="confirm-content">
+        <div class="confirm-header">
+          <div
+            class="confirm-icon"
+            style="background: {variantConfig.iconBg}; color: {variantConfig.iconColor};"
+          >
+            {#if icon}
+              {@render icon()}
+            {:else if variant === 'danger'}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="3 6 5 6 21 6"></polyline>
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+              </svg>
+            {:else if variant === 'warning'}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+                <line x1="12" y1="9" x2="12" y2="13"></line>
+                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+              </svg>
+            {:else if variant === 'success'}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+              </svg>
+            {:else}
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="12" y1="16" x2="12" y2="12"></line>
+                <line x1="12" y1="8" x2="12.01" y2="8"></line>
+              </svg>
+            {/if}
+          </div>
+
+          <div class="confirm-text">
+            <h3 id="confirm-title" class="confirm-title">{title}</h3>
+            <p class="confirm-message">{message}</p>
+          </div>
+        </div>
+
+        <div class="confirm-actions">
+          <Button variant="ghost" size="sm" onclick={handleCancel}>
+            {cancelText}
+          </Button>
+          <Button variant={variantConfig.buttonVariant} size="sm" onclick={handleConfirm}>
+            {confirmText}
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .confirm-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .confirm-backdrop::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: color-mix(in srgb, var(--color-base00) 80%, transparent);
+    backdrop-filter: blur(8px);
+  }
+
+  .confirm-dialog {
+    position: relative;
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-2xl);
+    width: 100%;
+    max-width: 28rem;
+    margin: var(--space-4);
+    animation: dialog-enter 0.2s ease-out;
+  }
+
+  @keyframes dialog-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .confirm-close {
+    position: absolute;
+    top: var(--space-4);
+    right: var(--space-4);
+    padding: var(--space-1);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-lg);
+    color: var(--color-base04);
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+  }
+
+  .confirm-close:hover {
+    background: var(--color-base02);
+    color: var(--color-base05);
+  }
+
+  .confirm-content {
+    padding: var(--space-6);
+  }
+
+  .confirm-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-4);
+  }
+
+  .confirm-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--radius-lg);
+  }
+
+  .confirm-text {
+    flex: 1;
+    padding-top: var(--space-1);
+  }
+
+  .confirm-title {
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-base07);
+  }
+
+  .confirm-message {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+    line-height: 1.5;
+  }
+
+  .confirm-actions {
+    display: flex;
+    gap: var(--space-3);
+    justify-content: flex-end;
+    margin-top: var(--space-6);
+  }
+</style>

package/src/components/overlays/Dropdown.svelte

@@ -0,0 +1,153 @@
+<!--
+  @component Dropdown
+
+  An action menu dropdown component.
+
+  @example
+  <Dropdown>
+    {#snippet trigger()}
+      <Button>Options</Button>
+    {/snippet}
+    <DropdownItem onclick={handleEdit}>Edit</DropdownItem>
+    <DropdownItem onclick={handleDelete} variant="danger">Delete</DropdownItem>
+  </Dropdown>
+-->
+<script>
+  import { clickOutside, escapeKey } from '../../actions/index.js';
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    open = $bindable(false),
+    position = 'bottom-start',
+    trigger,
+    children,
+    class: className = ''
+  } = $props();
+
+  let dropdownEl = $state(null);
+
+  function toggle() {
+    open = !open;
+  }
+
+  function close() {
+    open = false;
+  }
+
+  // Position classes
+  const positionMap = {
+    'bottom-start': 'dropdown-bottom-start',
+    'bottom-end': 'dropdown-bottom-end',
+    'bottom-center': 'dropdown-bottom-center',
+    'top-start': 'dropdown-top-start',
+    'top-end': 'dropdown-top-end',
+    'top-center': 'dropdown-top-center'
+  };
+</script>
+
+<div
+  class={cn('dropdown', className)}
+  bind:this={dropdownEl}
+  use:clickOutside={close}
+  use:escapeKey={close}
+>
+  <div class="dropdown-trigger" onclick={toggle}>
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div class="dropdown-content {positionMap[position] || positionMap['bottom-start']}">
+      {@render children?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-trigger {
+    display: inline-flex;
+  }
+
+  .dropdown-content {
+    position: absolute;
+    z-index: 50;
+    min-width: 10rem;
+    padding: var(--space-1);
+    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;
+  }
+
+  /* Position variants */
+  .dropdown-bottom-start {
+    top: 100%;
+    left: 0;
+    margin-top: var(--space-1);
+  }
+
+  .dropdown-bottom-end {
+    top: 100%;
+    right: 0;
+    margin-top: var(--space-1);
+  }
+
+  .dropdown-bottom-center {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--space-1);
+  }
+
+  .dropdown-top-start {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: var(--space-1);
+  }
+
+  .dropdown-top-end {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: var(--space-1);
+  }
+
+  .dropdown-top-center {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--space-1);
+  }
+
+  @keyframes dropdown-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .dropdown-top-start,
+  .dropdown-top-end,
+  .dropdown-top-center {
+    animation-name: dropdown-enter-up;
+  }
+
+  @keyframes dropdown-enter-up {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

package/src/components/overlays/DropdownDivider.svelte

@@ -0,0 +1,23 @@
+<!--
+  @component DropdownDivider
+
+  A divider within a Dropdown menu.
+
+  @example
+  <DropdownItem>Edit</DropdownItem>
+  <DropdownDivider />
+  <DropdownItem variant="danger">Delete</DropdownItem>
+-->
+<script>
+  let { class: className = '' } = $props();
+</script>
+
+<div class="dropdown-divider {className}" role="separator"></div>
+
+<style>
+  .dropdown-divider {
+    height: 1px;
+    margin: var(--space-1) 0;
+    background: var(--color-base02);
+  }
+</style>