pixelweaver 0.1.0

package/src/lib/ui/MenuBar.svelte

@@ -0,0 +1,590 @@
+<!--
+  MenuBar -- dynamic, registry-driven horizontal menu bar with submenu support.
+
+  Reads from menuRegistry via buildMenuBar() to construct menus reactively.
+  Supports nested submenus, group separators, disabled items, and keyboard
+  shortcuts. Retains click-to-open, hover-to-switch, escape-to-close, and
+  click-outside-to-close behavior.
+
+  Keyboard navigation (delegated to a single keydown listener on the menubar):
+    - Left/Right on a closed top-level trigger: move focus between top-level
+      triggers. If a menu is already open, switch to the next/prev menu and
+      keep it open.
+    - Down on a focused top-level trigger: open the menu and focus its first
+      non-separator, non-disabled item.
+    - Down/Up inside a menu: move focus to the next/previous focusable item
+      (wraps). Home/End jump to first/last focusable item.
+    - Right on a submenu-parent item: open the submenu and focus its first
+      item. On a regular item inside a top-level menu, Right moves to the
+      next top-level menu (standard menubar behavior).
+    - Left inside a submenu: close the submenu and restore focus to its
+      parent item.
+    - Left on a regular item of a top-level menu (not a submenu parent):
+      move to the previous top-level menu.
+    - Enter/Space: activate the focused item (same as click).
+    - Escape: close the current level; if nested, go up one level; if a
+      top-level menu, close it and return focus to the trigger.
+    - Character typing: jumps to the next focusable item in the current
+      level whose label starts with that letter (case-insensitive).
+    - Roving tabindex: exactly one element in the currently-active level
+      has tabindex=0; the rest have tabindex=-1. DOM focus is moved via an
+      $effect that watches the focusedItemId.
+-->
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { buildMenuBar, type MenuItem } from './menu-builder.js';
+  import ChevronRight from '~icons/lucide/chevron-right';
+
+  // --- Reactive menu tree ---
+
+  let menus = $derived(buildMenuBar());
+
+  // --- Dropdown state ---
+
+  let openMenu: string | null = $state(null);
+  let openSubmenu: string | null = $state(null);
+
+  // Roving tabindex: id of the currently focused item at the deepest open
+  // level. When no menu is open, this is the label of the focused top-level
+  // trigger (or null if nothing in the menubar has focus). When a menu is
+  // open with no submenu, it's the item id in the top-level dropdown. When
+  // a submenu is open, it's the child item id in the submenu.
+  let focusedItemId: string | null = $state(null);
+
+  let menuBarRef: HTMLElement | undefined = $state();
+
+  // --- Focusable-item helpers ---
+
+  /** Items that can receive focus/activation (skips separators and disabled items). */
+  function focusableItems(items: MenuItem[]): MenuItem[] {
+    return items.filter((i) => !i.separator && !i.disabled);
+  }
+
+  /** Get the focusable list for the current level (submenu > menu). */
+  function currentLevelItems(): MenuItem[] {
+    if (openMenu === null) return [];
+    const menu = menus.find((m) => m.label === openMenu);
+    if (!menu) return [];
+    if (openSubmenu !== null) {
+      const parent = menu.items.find((i) => i.id === openSubmenu);
+      if (parent?.children) return focusableItems(parent.children);
+      return [];
+    }
+    return focusableItems(menu.items);
+  }
+
+  // --- Opening / closing helpers ---
+
+  /** Open the given top-level menu and focus its first focusable item. */
+  function openTopMenu(label: string, focusFirst = true): void {
+    openMenu = label;
+    openSubmenu = null;
+    if (focusFirst) {
+      const menu = menus.find((m) => m.label === label);
+      const first = menu ? focusableItems(menu.items)[0] : undefined;
+      focusedItemId = first ? first.id : null;
+    }
+  }
+
+  /** Close all menus and return focus to the trigger of the menu that was open. */
+  function closeAllMenus(restoreFocusToTrigger = true): void {
+    const restoreLabel = openMenu;
+    openMenu = null;
+    openSubmenu = null;
+    if (restoreFocusToTrigger && restoreLabel !== null) {
+      focusedItemId = restoreLabel; // trigger row
+    } else if (!restoreFocusToTrigger) {
+      focusedItemId = null;
+    }
+  }
+
+  /** Open a submenu and focus its first child. */
+  function openSubmenuAt(parentId: string): void {
+    openSubmenu = parentId;
+    const menu = menus.find((m) => m.label === openMenu);
+    const parent = menu?.items.find((i) => i.id === parentId);
+    const first = parent?.children ? focusableItems(parent.children)[0] : undefined;
+    focusedItemId = first ? first.id : null;
+  }
+
+  /** Close the open submenu and restore focus to the parent item. */
+  function closeSubmenu(): void {
+    if (openSubmenu === null) return;
+    const parentId = openSubmenu;
+    openSubmenu = null;
+    focusedItemId = parentId;
+  }
+
+  // --- Mouse handlers (retain prior behavior) ---
+
+  function toggleMenu(label: string): void {
+    if (openMenu === label) {
+      closeAllMenus(true);
+    } else {
+      openTopMenu(label, true);
+    }
+  }
+
+  function handleMenuHover(label: string): void {
+    // Only switch on hover if a menu is already open
+    if (openMenu !== null && openMenu !== label) {
+      openTopMenu(label, true);
+    }
+  }
+
+  function handleTriggerFocus(label: string): void {
+    // When no menu is open, track which trigger has DOM focus so that
+    // Down/Enter act on it. Do NOT open the menu on focus alone.
+    if (openMenu === null) {
+      focusedItemId = label;
+    }
+  }
+
+  function activateItem(item: MenuItem): void {
+    if (item.separator || item.disabled) return;
+    if (item.children) {
+      openSubmenuAt(item.id);
+      return;
+    }
+    item.action?.();
+    closeAllMenus(false);
+  }
+
+  function handleItemClick(item: MenuItem): void {
+    activateItem(item);
+  }
+
+  // --- Character typing (type-ahead) ---
+
+  /** Find the next focusable item whose label starts with `ch` (case-insensitive). */
+  function typeAheadJump(ch: string): void {
+    const items = currentLevelItems();
+    if (items.length === 0) return;
+    const lower = ch.toLowerCase();
+    const currentIdx = items.findIndex((i) => i.id === focusedItemId);
+    // Search starting AFTER current, wrap around.
+    for (let step = 1; step <= items.length; step++) {
+      const it = items[(currentIdx + step) % items.length];
+      if (it && it.label.toLowerCase().startsWith(lower)) {
+        focusedItemId = it.id;
+        return;
+      }
+    }
+  }
+
+  // --- Central keydown handler ---
+
+  function handleKeydown(e: KeyboardEvent): void {
+    // Ignore unless focus is somewhere in the menubar DOM subtree.
+    const target = e.target as Node | null;
+    if (!menuBarRef || !target || !menuBarRef.contains(target)) return;
+
+    const key = e.key;
+
+    // --- Case A: no menu open, focus on a top-level trigger ---
+    if (openMenu === null) {
+      if (focusedItemId === null) return;
+      const idx = menus.findIndex((m) => m.label === focusedItemId);
+      if (idx < 0) return;
+
+      if (key === 'ArrowRight' || key === 'ArrowLeft') {
+        const delta = key === 'ArrowRight' ? 1 : -1;
+        const next = menus[(idx + delta + menus.length) % menus.length];
+        if (next) {
+          e.preventDefault();
+          focusedItemId = next.label;
+        }
+        return;
+      }
+      if (key === 'ArrowDown' || key === 'Enter' || key === ' ') {
+        e.preventDefault();
+        const m = menus[idx];
+        if (m) openTopMenu(m.label, true);
+        return;
+      }
+      if (key === 'Home') {
+        e.preventDefault();
+        const first = menus[0];
+        if (first) focusedItemId = first.label;
+        return;
+      }
+      if (key === 'End') {
+        e.preventDefault();
+        const last = menus[menus.length - 1];
+        if (last) focusedItemId = last.label;
+        return;
+      }
+      return;
+    }
+
+    // --- Case B: a top-level menu is open (possibly with a submenu). ---
+
+    if (key === 'Escape') {
+      e.preventDefault();
+      if (openSubmenu !== null) {
+        closeSubmenu();
+      } else {
+        closeAllMenus(true);
+      }
+      return;
+    }
+
+    const items = currentLevelItems();
+
+    if (key === 'ArrowDown') {
+      e.preventDefault();
+      if (items.length === 0) return;
+      const i = items.findIndex((it) => it.id === focusedItemId);
+      const next = items[(i + 1 + items.length) % items.length];
+      if (next) focusedItemId = next.id;
+      return;
+    }
+    if (key === 'ArrowUp') {
+      e.preventDefault();
+      if (items.length === 0) return;
+      const i = items.findIndex((it) => it.id === focusedItemId);
+      const prev = items[(i - 1 + items.length) % items.length];
+      if (prev) focusedItemId = prev.id;
+      return;
+    }
+    if (key === 'Home') {
+      e.preventDefault();
+      const first = items[0];
+      if (first) focusedItemId = first.id;
+      return;
+    }
+    if (key === 'End') {
+      e.preventDefault();
+      const last = items[items.length - 1];
+      if (last) focusedItemId = last.id;
+      return;
+    }
+    if (key === 'Enter' || key === ' ') {
+      e.preventDefault();
+      const focused = items.find((it) => it.id === focusedItemId);
+      if (focused) activateItem(focused);
+      return;
+    }
+    if (key === 'ArrowRight') {
+      e.preventDefault();
+      // If current item is a submenu parent, open it.
+      const focused = items.find((it) => it.id === focusedItemId);
+      if (focused?.children) {
+        openSubmenuAt(focused.id);
+        return;
+      }
+      // Otherwise, if inside a submenu, Right does nothing (no deeper level).
+      if (openSubmenu !== null) return;
+      // Inside a top-level menu, Right cycles to the next top-level menu.
+      const idx = menus.findIndex((m) => m.label === openMenu);
+      if (idx < 0) return;
+      const next = menus[(idx + 1) % menus.length];
+      if (next) openTopMenu(next.label, true);
+      return;
+    }
+    if (key === 'ArrowLeft') {
+      e.preventDefault();
+      // If inside a submenu, Left closes it and returns to parent.
+      if (openSubmenu !== null) {
+        closeSubmenu();
+        return;
+      }
+      // Inside a top-level menu: cycle to the previous top-level menu.
+      const idx = menus.findIndex((m) => m.label === openMenu);
+      if (idx < 0) return;
+      const prev = menus[(idx - 1 + menus.length) % menus.length];
+      if (prev) openTopMenu(prev.label, true);
+      return;
+    }
+
+    // Type-ahead: single printable character, no modifiers.
+    if (
+      key.length === 1 &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey &&
+      /\S/.test(key)
+    ) {
+      e.preventDefault();
+      typeAheadJump(key);
+    }
+  }
+
+  /**
+   * Close menus when the user clicks outside the menu bar.
+   * Uses pointerdown in the capture phase so it fires before any
+   * stopPropagation() calls in child components (e.g. dockview panels).
+   */
+  function handleOutsidePointerDown(e: PointerEvent): void {
+    if (menuBarRef && !menuBarRef.contains(e.target as Node)) {
+      closeAllMenus(false);
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('pointerdown', handleOutsidePointerDown, true);
+    return () => {
+      window.removeEventListener('pointerdown', handleOutsidePointerDown, true);
+    };
+  });
+
+  // --- Focus effect: move DOM focus to the currently focused item ---
+
+  // After every state change that updates focusedItemId, wait for the DOM
+  // to update and then focus the matching element. We look up by the
+  // data-menu-item-id attribute within the menubar.
+  $effect(() => {
+    // Re-run when any of these change.
+    const id = focusedItemId;
+    void openMenu;
+    void openSubmenu;
+    if (!menuBarRef || id === null) return;
+    void tick().then(() => {
+      // menuBarRef is a `$state`-backed `bind:this` target; the tick()
+      // boundary loses the narrowing and the component may have
+      // unmounted between scheduling and execution.
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!menuBarRef) return;
+      const el = menuBarRef.querySelector<HTMLElement>(
+        `[data-menu-item-id="${CSS.escape(id)}"]`,
+      );
+      if (el && document.activeElement !== el) {
+        el.focus();
+      }
+    });
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<nav class="menubar" bind:this={menuBarRef} role="menubar" aria-label="Application">
+  <span class="brand">PixelWeaver</span>
+
+  {#each menus as menu (menu.label)}
+    <div class="menu-trigger-wrapper" role="none">
+      <button
+        class="menu-trigger"
+        class:active={openMenu === menu.label}
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={openMenu === menu.label}
+        data-menu-item-id={menu.label}
+        tabindex={focusedItemId === menu.label && openMenu === null ? 0 : -1}
+        onclick={() => { toggleMenu(menu.label); }}
+        onmouseenter={() => { handleMenuHover(menu.label); }}
+        onfocus={() => { handleTriggerFocus(menu.label); }}
+      >
+        {menu.label}
+      </button>
+
+      {#if openMenu === menu.label}
+        <div class="dropdown" role="menu" aria-label={menu.label}>
+          {#each menu.items as item (item.id)}
+            {#if item.separator}
+              <div class="separator" role="separator"></div>
+            {:else if item.children}
+              <!-- Submenu trigger -->
+              <div
+                class="dropdown-item submenu-trigger"
+                class:focused={focusedItemId === item.id && openSubmenu !== item.id}
+                role="menuitem"
+                tabindex={focusedItemId === item.id && openSubmenu === null ? 0 : -1}
+                data-menu-item-id={item.id}
+                aria-haspopup="menu"
+                aria-expanded={openSubmenu === item.id}
+                onmouseenter={() => { openSubmenu = item.id; focusedItemId = item.id; }}
+                onmouseleave={() => { if (openSubmenu === item.id) openSubmenu = null; }}
+              >
+                <span class="item-label">{item.label}</span>
+                <span class="submenu-arrow"><ChevronRight /></span>
+                {#if openSubmenu === item.id}
+                  <div class="dropdown submenu" role="menu" aria-label={item.label}>
+                    {#each item.children as child (child.id)}
+                      {#if child.separator}
+                        <div class="separator" role="separator"></div>
+                      {:else}
+                        <button
+                          class="dropdown-item"
+                          class:disabled={child.disabled ?? false}
+                          class:focused={focusedItemId === child.id}
+                          role="menuitem"
+                          data-menu-item-id={child.id}
+                          tabindex={focusedItemId === child.id ? 0 : -1}
+                          onclick={() => { handleItemClick(child); }}
+                          disabled={child.disabled ?? false}
+                        >
+                          <span class="item-label">{child.label}</span>
+                          {#if child.shortcut}
+                            <span class="item-shortcut">{child.shortcut}</span>
+                          {/if}
+                        </button>
+                      {/if}
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {:else}
+              <button
+                class="dropdown-item"
+                class:disabled={item.disabled ?? false}
+                class:focused={focusedItemId === item.id}
+                role="menuitem"
+                data-menu-item-id={item.id}
+                tabindex={focusedItemId === item.id ? 0 : -1}
+                onclick={() => { handleItemClick(item); }}
+                disabled={item.disabled ?? false}
+              >
+                <span class="item-label">{item.label}</span>
+                {#if item.shortcut}
+                  <span class="item-shortcut">{item.shortcut}</span>
+                {/if}
+              </button>
+            {/if}
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</nav>
+
+<style>
+  .menubar {
+    height: 36px;
+    background: var(--bg-toolbar);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    flex-shrink: 0;
+    gap: 2px;
+    user-select: none;
+  }
+
+  .brand {
+    font-size: var(--text-xl);
+    font-weight: 600;
+    color: var(--accent);
+    letter-spacing: 0.5px;
+    margin-right: 12px;
+  }
+
+  .menu-trigger-wrapper {
+    position: relative;
+  }
+
+  .menu-trigger {
+    height: 26px;
+    padding: 0 10px;
+    background: none;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-trigger:hover {
+    background: var(--bg-secondary);
+  }
+
+  .menu-trigger.active {
+    background: var(--bg-secondary);
+  }
+
+  .menu-trigger:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+
+  /* --- Dropdown --- */
+
+  .dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 160px;
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: 4px 0;
+    z-index: 1000;
+  }
+
+  .dropdown-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 5px 12px;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    cursor: pointer;
+    text-align: left;
+    gap: 24px;
+    white-space: nowrap;
+  }
+
+  .dropdown-item:hover:not(:disabled) {
+    background: var(--bg-secondary);
+  }
+
+  /* Keyboard-focused item highlight (matches hover). */
+  .dropdown-item.focused:not(:disabled) {
+    background: var(--bg-secondary);
+  }
+
+  .dropdown-item:focus {
+    outline: none;
+  }
+
+  .dropdown-item:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+  }
+
+  .dropdown-item:disabled,
+  .dropdown-item.disabled {
+    color: var(--text-secondary);
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .item-shortcut {
+    color: var(--text-secondary);
+    font-size: var(--text-sm);
+  }
+
+  .separator {
+    height: 1px;
+    background: var(--border);
+    margin: 4px 0;
+  }
+
+  /* --- Submenu --- */
+
+  .submenu-trigger {
+    position: relative;
+  }
+
+  .submenu-arrow {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .submenu-arrow :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  .submenu {
+    position: absolute;
+    left: 100%;
+    top: -4px;
+  }
+</style>