pixelweaver 0.1.0

package/src/lib/ui/StatusBar.svelte

@@ -0,0 +1,145 @@
+<!--
+  StatusBar -- bottom bar showing at-a-glance editor state.
+  Displays tool, cursor, canvas size, zoom, frame info, color, and sync status.
+-->
+<script lang="ts">
+  import { canvasState } from '../canvas/canvas-state.svelte.js';
+  import { getActiveTool } from '../shortcuts/shortcut-state.svelte.js';
+  import { syncState } from '../sync/sync-state.svelte.js';
+  import { getCurrentFrameIndex, getFrames } from '../animation/frame-model.svelte.js';
+  import { getForegroundColor } from '../color/color-state.svelte.js';
+
+  // Cursor display: show coordinates when in bounds, dashes otherwise
+  let cursorText = $derived(
+    canvasState.cursorInBounds
+      ? `X: ${String(canvasState.cursorX)}, Y: ${String(canvasState.cursorY)}`
+      : 'X: --, Y: --'
+  );
+
+  let canvasSizeText = $derived(`${String(canvasState.canvasWidth)} x ${String(canvasState.canvasHeight)}`);
+  let zoomText = $derived(`${String(Math.round(canvasState.zoom * 100))}%`);
+  let toolName = $derived(getActiveTool() || 'none');
+
+  // Frame info: 1-indexed for display
+  let frameText = $derived.by(() => {
+    const allFrames = getFrames();
+    const total = allFrames.length || 1;
+    const current = getCurrentFrameIndex() + 1;
+    return `Frame ${String(current)}/${String(total)}`;
+  });
+
+  let fgColor = $derived(getForegroundColor());
+
+  // Sync status: derive label and CSS class from connection state
+  let syncLabel = $derived.by(() => {
+    if (syncState.connected) return 'Connected';
+    if (syncState.connecting || syncState.reconnecting) return 'Connecting...';
+    return 'Offline';
+  });
+
+  let syncClass = $derived.by(() => {
+    if (syncState.connected) return 'sync-connected';
+    if (syncState.connecting || syncState.reconnecting) return 'sync-connecting';
+    return 'sync-offline';
+  });
+
+  let syncTooltip = $derived(syncState.lastError ?? '');
+</script>
+
+<footer class="statusbar">
+  <div class="statusbar-left">
+    <span class="status-item">Tool: {toolName}</span>
+    <span class="status-item status-mono">{cursorText}</span>
+    <span class="status-divider"></span>
+    <span class="status-item status-mono">{canvasSizeText}</span>
+    <span class="status-item status-mono">{zoomText}</span>
+  </div>
+
+  <div class="statusbar-right">
+    <span class="status-item">{frameText}</span>
+    <span class="status-divider"></span>
+    <span class="status-item status-color">
+      <span class="color-swatch" style:background-color={fgColor}></span>
+      <span class="status-mono">{fgColor}</span>
+    </span>
+    <span class="status-divider"></span>
+    <span class="status-item status-sync {syncClass}" title={syncTooltip}>
+      <span class="sync-dot"></span>
+      {syncLabel}
+    </span>
+  </div>
+</footer>
+
+<style>
+  .statusbar {
+    height: 24px;
+    background: var(--bg-toolbar);
+    border-top: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    flex-shrink: 0;
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    user-select: none;
+  }
+
+  .statusbar-left,
+  .statusbar-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .status-item {
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .status-mono {
+    font-family: var(--font-mono);
+  }
+
+  /* Thin vertical divider between groups */
+  .status-divider {
+    width: 1px;
+    height: 12px;
+    background: var(--border);
+    flex-shrink: 0;
+  }
+
+  /* Foreground color swatch */
+  .color-swatch {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    flex-shrink: 0;
+  }
+
+  /* Sync status dot */
+  .sync-dot {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .sync-connected .sync-dot {
+    background: var(--success);
+  }
+
+  .sync-connecting .sync-dot {
+    background: var(--warning);
+  }
+
+  .sync-offline .sync-dot {
+    background: var(--error);
+  }
+</style>

package/src/lib/ui/ToolbarPanel.svelte

@@ -0,0 +1,488 @@
+<!--
+  ToolbarPanel -- generic, registry-driven toolbar component.
+
+  Reads toolbar contributions from toolbarRegistry filtered by toolbarId,
+  groups and sorts them, and renders tool/command/separator/widget items.
+  Orientation is derived from container aspect ratio via ResizeObserver.
+  Always 1 item per row/column. Only iconSize is user-configurable.
+-->
+<script lang="ts">
+  import { toolbarRegistry, toolRegistry, commandRegistry } from '../core/registries.svelte.js';
+  import { executeOrDispatch, getCommandForDispatch } from '../core/command-runner.js';
+  import { getActiveTool, setActiveTool, getBindings } from '../shortcuts/shortcut-state.svelte.js';
+  import { getToolbarConfig } from './toolbar-config.js';
+  import { getToolOptionValue, setToolOptionValue, toggleToolOption } from '../core/tool-options-state.svelte.js';
+  import type { ToolbarContribution, ToolOption } from '../core/plugin-types.js';
+
+  interface Props {
+    toolbarId: string;
+  }
+
+  let { toolbarId }: Props = $props();
+
+  // Only iconSize is persisted; orientation is derived from container aspect ratio
+  let config = $derived(getToolbarConfig(toolbarId));
+  let effectiveIconSize = $derived(config.iconSize);
+
+  let containerEl: HTMLDivElement | undefined = $state();
+  let orientation: 'horizontal' | 'vertical' = $state('vertical');
+  let hoveredItem: string | null = $state(null);
+  let tooltipPos: { x: number; y: number } | null = $state(null);
+
+  /** Show tooltip positioned relative to the viewport using the button's bounding rect. */
+  function showTooltip(event: MouseEvent, itemName: string): void {
+    hoveredItem = itemName;
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    if (orientation === 'vertical') {
+      tooltipPos = { x: rect.right + 8, y: rect.top + rect.height / 2 };
+    } else {
+      tooltipPos = { x: rect.left + rect.width / 2, y: rect.bottom + 8 };
+    }
+  }
+
+  function hideTooltip(): void {
+    hoveredItem = null;
+    tooltipPos = null;
+  }
+
+  /** Resolve display label and shortcut for the currently hovered item. */
+  let tooltipContent = $derived.by(() => {
+    if (!hoveredItem) return null;
+    for (const [, items] of groupedItems) {
+      for (const item of items) {
+        if (item.name === hoveredItem) {
+          const label = item.label ?? (item.targetId ? formatName(item.targetId) : '');
+          const shortcut = getShortcut(item);
+          return { label, shortcut };
+        }
+      }
+    }
+    return null;
+  });
+
+  // Derive orientation from container aspect ratio
+  $effect(() => {
+    if (!containerEl) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      orientation = width > height ? 'horizontal' : 'vertical';
+    });
+    observer.observe(containerEl);
+    return () => { observer.disconnect(); };
+  });
+
+  // Augmented contribution with its registry key for identification
+  type NamedContribution = ToolbarContribution & { name: string };
+
+  /**
+   * Collect contributions for this toolbar, group by `group` field,
+   * sort groups by minimum order, sort items within groups by order.
+   */
+  let groupedItems = $derived.by(() => {
+    const all: NamedContribution[] = [...toolbarRegistry.getAll().entries()]
+      .map(([name, contrib]) => ({ name, ...contrib }))
+      .filter((item) => item.toolbarId === toolbarId);
+
+    // Bucket items by group
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient grouping inside a $derived
+    const groups = new Map<string, NamedContribution[]>();
+    for (const item of all) {
+      const list = groups.get(item.group) ?? [];
+      list.push(item);
+      groups.set(item.group, list);
+    }
+
+    // Sort items within each group by order
+    for (const list of groups.values()) {
+      list.sort((a, b) => a.order - b.order);
+    }
+
+    // Sort groups by the minimum order of their items
+    const sortedGroups = [...groups.entries()].sort(
+      (a, b) => Math.min(...a[1].map((i) => i.order)) - Math.min(...b[1].map((i) => i.order))
+    );
+
+    return sortedGroups;
+  });
+
+  /**
+   * Resolve the icon for a toolbar item. Priority:
+   * 1. Contribution-level icon override
+   * 2. Tool or command registry icon
+   */
+  function resolveIcon(item: NamedContribution): string | import('svelte').Component | undefined {
+    if (item.icon) return item.icon;
+    if (item.kind === 'tool' && item.targetId) {
+      return toolRegistry.get(item.targetId)?.icon;
+    }
+    if (item.kind === 'command' && item.targetId) {
+      return commandRegistry.get(item.targetId)?.icon;
+    }
+    return undefined;
+  }
+
+  /**
+   * Format a targetId for display: replace hyphens with spaces,
+   * capitalize first letter of each word.
+   */
+  function formatName(name: string): string {
+    return name
+      .split(/[-_]/)
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(' ');
+  }
+
+  /**
+   * Build a tooltip string for an item: display name + keyboard shortcut.
+   */
+  function getTooltip(item: NamedContribution): string {
+    const label = item.label ?? (item.targetId ? formatName(item.targetId) : '');
+    let shortcut = '';
+    if (item.kind === 'tool' && item.targetId) {
+      shortcut = getBindings().get(`tool.${item.targetId}`)?.key ?? '';
+    } else if (item.kind === 'command' && item.targetId) {
+      shortcut = commandRegistry.get(item.targetId)?.defaultShortcut ?? '';
+    }
+    return label + (shortcut ? ` (${shortcut})` : '');
+  }
+
+  /**
+   * Get the keyboard shortcut string for an item (for the <kbd> element).
+   */
+  function getShortcut(item: NamedContribution): string {
+    if (item.kind === 'tool' && item.targetId) {
+      return getBindings().get(`tool.${item.targetId}`)?.key ?? '';
+    }
+    if (item.kind === 'command' && item.targetId) {
+      return commandRegistry.get(item.targetId)?.defaultShortcut ?? '';
+    }
+    return '';
+  }
+
+  /**
+   * Handle tool selection: deactivate previous tool, activate new one.
+   */
+  function selectTool(targetId: string): void {
+    const prevName = getActiveTool();
+    if (prevName === targetId) return;
+
+    // Deactivate previous tool if it exists
+    if (prevName) {
+      const prevTool = toolRegistry.get(prevName);
+      prevTool?.onDeactivate?.();
+    }
+
+    setActiveTool(targetId);
+    toolRegistry.get(targetId)?.onActivate?.();
+  }
+
+  /**
+   * Handle command execution.
+   */
+  function executeCommand(targetId: string): void {
+    const cmd = getCommandForDispatch(targetId);
+    if (cmd) executeOrDispatch(targetId, cmd);
+  }
+
+  /**
+   * Handle click for any item based on its kind.
+   */
+  function handleClick(item: NamedContribution): void {
+    if (item.kind === 'tool' && item.targetId) {
+      selectTool(item.targetId);
+    } else if (item.kind === 'command' && item.targetId) {
+      executeCommand(item.targetId);
+    }
+  }
+
+  /**
+   * Get the declared options for a tool (if any).
+   * Returns an empty array when the tool has no options.
+   */
+  function getToolOptions(toolName: string): ToolOption[] {
+    return toolRegistry.get(toolName)?.options ?? [];
+  }
+</script>
+
+<div
+  class="toolbar-panel"
+  class:horizontal={orientation === 'horizontal'}
+  class:vertical={orientation === 'vertical'}
+  bind:this={containerEl}
+  role="toolbar"
+  aria-label="Toolbar"
+  aria-orientation={orientation}
+  style:--icon-size="{effectiveIconSize}px"
+  style:--btn-size="{effectiveIconSize + 16}px"
+>
+  {#each groupedItems as [_groupName, items], groupIdx (groupIdx)}
+    {#if groupIdx > 0}
+      <div class="separator" role="separator"></div>
+    {/if}
+    {#each items as item (item.name)}
+      {#if item.kind === 'separator'}
+        <div class="separator" role="separator"></div>
+      {:else if item.kind === 'widget' && item.widget}
+        {@const Widget = item.widget}
+        <Widget />
+      {:else if item.kind === 'tool' || item.kind === 'command'}
+        {@const icon = resolveIcon(item)}
+        {@const active = item.kind === 'tool' && item.targetId
+          ? getActiveTool() === item.targetId
+          : false}
+        {@const displayLabel = item.label ?? (item.targetId ? formatName(item.targetId) : '')}
+        <button
+          class="toolbar-btn"
+          class:active
+          title={getTooltip(item)}
+          aria-pressed={item.kind === 'tool' ? active : undefined}
+          aria-label={displayLabel}
+          onmouseenter={(e) => { showTooltip(e, item.name); }}
+          onmouseleave={hideTooltip}
+          onclick={() => { handleClick(item); }}
+        >
+          <span class="icon-wrapper">
+            {#if icon}
+              {#if typeof icon === 'string'}
+                {icon}
+              {:else}
+                {@const IconComp = icon}
+                <IconComp />
+              {/if}
+            {/if}
+          </span>
+        </button>
+        <!-- Sub-buttons for tool options (shown only when this tool is active) -->
+        {#if active && item.kind === 'tool' && item.targetId}
+          {@const targetId = item.targetId}
+          {@const toolOptions = getToolOptions(targetId)}
+          {#each toolOptions as opt (opt.id)}
+            {#if opt.type === 'toggle'}
+              {@const optActive = getToolOptionValue(targetId, opt.id)}
+              <button
+                class="toolbar-btn sub-btn"
+                class:active={optActive}
+                title={opt.label}
+                aria-pressed={optActive}
+                aria-label={opt.label}
+                onclick={() => toggleToolOption(targetId, opt.id)}
+              >
+                <span class="icon-wrapper">
+                  {#if opt.icon}
+                    {#if typeof opt.icon === 'string'}
+                      {opt.icon}
+                    {:else}
+                      {@const OptIcon = opt.icon}
+                      <OptIcon />
+                    {/if}
+                  {/if}
+                </span>
+              </button>
+            {:else if opt.type === 'select'}
+              <!-- Row of choice buttons for select-type options -->
+              {@const currentValue = getToolOptionValue(targetId, opt.id)}
+              {#each opt.choices as choice (choice.value)}
+                <button
+                  class="toolbar-btn sub-btn"
+                  class:active={currentValue === choice.value}
+                  title="{opt.label}: {choice.label}"
+                  aria-pressed={currentValue === choice.value}
+                  aria-label="{opt.label}: {choice.label}"
+                  onclick={() => { setToolOptionValue(targetId, opt.id, choice.value); }}
+                >
+                  <span class="icon-wrapper select-label">{choice.label}</span>
+                </button>
+              {/each}
+            {/if}
+          {/each}
+        {/if}
+      {/if}
+    {/each}
+  {/each}
+</div>
+
+{#if tooltipContent && tooltipPos}
+  <div
+    class="tooltip"
+    class:tooltip-vertical={orientation === 'vertical'}
+    class:tooltip-horizontal={orientation === 'horizontal'}
+    role="tooltip"
+    style:position="fixed"
+    style:left="{tooltipPos.x}px"
+    style:top="{tooltipPos.y}px"
+  >
+    {tooltipContent.label}{#if tooltipContent.shortcut}<kbd>{tooltipContent.shortcut}</kbd>{/if}
+  </div>
+{/if}
+
+<style>
+  /* --- Layout --- */
+
+  .toolbar-panel {
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    padding: var(--space-2);
+    gap: 3px;
+    overflow: hidden;
+    flex-shrink: 0;
+    font-family: var(--font-ui);
+  }
+
+  .toolbar-panel {
+    display: flex;
+  }
+  .toolbar-panel.vertical {
+    flex-direction: column;
+    align-items: center;
+  }
+  .toolbar-panel.horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  /* --- Buttons --- */
+
+  .toolbar-btn {
+    position: relative;
+    width: var(--btn-size);
+    height: var(--btn-size);
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition: background var(--transition-fast), color var(--transition-fast);
+  }
+
+  .toolbar-btn:hover:not(.active) {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+
+  .toolbar-btn.active {
+    background: var(--accent);
+    color: var(--text-on-accent, #fff);
+  }
+
+  /* Sub-buttons for tool options -- slightly smaller, visually subordinate */
+  .toolbar-btn.sub-btn {
+    width: calc(var(--btn-size) - 6px);
+    height: calc(var(--btn-size) - 6px);
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+  }
+
+  .toolbar-btn.sub-btn:hover:not(.active) {
+    background: var(--bg-tertiary, var(--bg-secondary));
+    color: var(--text-primary);
+    border-color: var(--text-secondary);
+  }
+
+  .toolbar-btn.sub-btn.active {
+    background: var(--accent);
+    color: var(--text-on-accent, #fff);
+    border-color: var(--accent);
+  }
+
+  .toolbar-btn.sub-btn .icon-wrapper {
+    width: calc(var(--icon-size) - 2px);
+    height: calc(var(--icon-size) - 2px);
+  }
+
+  .toolbar-btn.sub-btn .icon-wrapper :global(svg) {
+    width: calc(var(--icon-size) - 2px);
+    height: calc(var(--icon-size) - 2px);
+  }
+
+  /* Text label inside select-type option buttons */
+  .toolbar-btn.sub-btn .select-label {
+    font-size: var(--text-sm, 11px);
+    font-weight: 600;
+    font-family: var(--font-ui);
+  }
+
+  /* --- Icon wrapper --- */
+
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    line-height: 1;
+    user-select: none;
+    color: inherit;
+  }
+
+  .icon-wrapper :global(svg) {
+    width: var(--icon-size);
+    height: var(--icon-size);
+  }
+
+  /* --- Separator --- */
+
+  .separator {
+    background: var(--border);
+    flex-shrink: 0;
+  }
+
+  .vertical > .separator {
+    /* Horizontal line in a vertical toolbar */
+    align-self: stretch;
+    height: 1px;
+    margin: var(--space-1) var(--space-2);
+  }
+
+  .horizontal > .separator {
+    /* Vertical line in a horizontal toolbar */
+    align-self: stretch;
+    width: 1px;
+    margin: var(--space-2) var(--space-1);
+  }
+
+  /* --- Tooltip (fixed-positioned, rendered outside toolbar-panel) --- */
+
+  .tooltip {
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-base);
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    box-shadow: var(--shadow-sm);
+  }
+
+  /* Vertical toolbar: tooltip appears to the right, vertically centered */
+  .tooltip-vertical {
+    transform: translateY(-50%);
+  }
+
+  /* Horizontal toolbar: tooltip appears below, horizontally centered */
+  .tooltip-horizontal {
+    transform: translateX(-50%);
+  }
+
+  .tooltip kbd {
+    font-family: inherit;
+    font-size: var(--text-sm);
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 1px 4px;
+    line-height: 1.2;
+  }
+</style>