pixelweaver 0.1.0

package/src/lib/ui/PluginManagerPanel.svelte

@@ -0,0 +1,475 @@
+<script lang="ts">
+  /**
+   * PluginManagerPanel -- read-only inspector for loaded plugins.
+   *
+   * Lists every plugin discovered and loaded through the plugin-loader,
+   * showing name, version, author, description, load status, and a
+   * collapsible view of what each plugin registered (commands, tools,
+   * panels, exporters, importers, shortcuts, menu items, toolbar items).
+   *
+   * Data comes from the reactive `pluginState` store populated by the
+   * loader; this panel performs no mutations.
+   */
+
+  import { pluginState, type LoadedPluginRecord } from './plugin-state.svelte.js';
+  import ChevronDown from '~icons/lucide/chevron-down';
+  import ChevronRight from '~icons/lucide/chevron-right';
+  import CheckCircle from '~icons/lucide/circle-check';
+  import AlertCircle from '~icons/lucide/circle-alert';
+
+  // --- Derived state ---
+
+  const plugins = $derived(pluginState.plugins);
+  const pluginCount = $derived(plugins.length);
+
+  // --- Local UI state ---
+
+  let expanded = $state<Set<string>>(new Set());
+  let filter = $state('');
+
+  const filteredPlugins = $derived.by(() => {
+    const needle = filter.trim().toLowerCase();
+    if (!needle) return plugins;
+    return plugins.filter((p) => {
+      if (p.name.toLowerCase().includes(needle)) return true;
+      if (p.description?.toLowerCase().includes(needle)) return true;
+      if (p.author?.toLowerCase().includes(needle)) return true;
+      return false;
+    });
+  });
+
+  // --- Actions ---
+
+  function toggleExpanded(name: string) {
+    // Svelte $state Sets need reassignment to trigger reactivity
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient copy before reassignment
+    const next = new Set(expanded);
+    if (next.has(name)) {
+      next.delete(name);
+    } else {
+      next.add(name);
+    }
+    expanded = next;
+  }
+
+  // --- Contribution helpers ---
+
+  /**
+   * Returns the non-empty contribution categories for a plugin as a list of
+   * (label, entries) pairs. Empty categories are hidden so the expanded view
+   * stays compact for plugins that contribute only one or two kinds.
+   */
+  function contributionGroups(
+    p: LoadedPluginRecord,
+  ): { label: string; entries: string[] }[] {
+    const c = p.contributions;
+    const groups: { label: string; entries: string[] }[] = [];
+    if (c.commands.length > 0) groups.push({ label: 'Commands', entries: c.commands });
+    if (c.tools.length > 0) groups.push({ label: 'Tools', entries: c.tools });
+    if (c.panels.length > 0) groups.push({ label: 'Panels', entries: c.panels });
+    if (c.exporters.length > 0) groups.push({ label: 'Exporters', entries: c.exporters });
+    if (c.importers.length > 0) groups.push({ label: 'Importers', entries: c.importers });
+    if (c.shortcuts.length > 0) groups.push({ label: 'Shortcuts', entries: c.shortcuts });
+    if (c.menuItems.length > 0) groups.push({ label: 'Menu Items', entries: c.menuItems });
+    if (c.toolbarItems.length > 0) groups.push({ label: 'Toolbar Items', entries: c.toolbarItems });
+    return groups;
+  }
+
+  function totalContributions(p: LoadedPluginRecord): number {
+    const c = p.contributions;
+    return (
+      c.commands.length +
+      c.tools.length +
+      c.panels.length +
+      c.exporters.length +
+      c.importers.length +
+      c.shortcuts.length +
+      c.menuItems.length +
+      c.toolbarItems.length
+    );
+  }
+</script>
+
+<div class="plugin-panel">
+  <!-- Header -->
+  <div class="plugin-header">
+    <span class="plugin-title">Plugins</span>
+    <span class="plugin-count">{pluginCount}</span>
+  </div>
+
+  <!-- Filter -->
+  <div class="plugin-filter">
+    <input
+      class="filter-input"
+      type="text"
+      placeholder="Filter plugins..."
+      aria-label="Filter plugins"
+      bind:value={filter}
+    />
+  </div>
+
+  <!-- Plugin list -->
+  <div class="plugin-list">
+    {#if pluginCount === 0}
+      <div class="empty-state">
+        <p class="empty-title">No plugins loaded</p>
+        <p class="empty-hint">Plugins discovered at startup will appear here.</p>
+      </div>
+    {:else if filteredPlugins.length === 0}
+      <div class="empty-state">
+        <p class="empty-title">No matches</p>
+        <p class="empty-hint">Try a different filter.</p>
+      </div>
+    {:else}
+      {#each filteredPlugins as plugin (plugin.name)}
+        {@const isOpen = expanded.has(plugin.name)}
+        {@const groups = contributionGroups(plugin)}
+        {@const totalCount = totalContributions(plugin)}
+        <div class="plugin-row" class:plugin-row--error={!plugin.loaded}>
+          <button
+            class="row-toggle"
+            aria-label={isOpen ? `Collapse ${plugin.name}` : `Expand ${plugin.name}`}
+            aria-expanded={isOpen}
+            onclick={() => { toggleExpanded(plugin.name); }}
+          >
+            <span class="toggle-icon">
+              {#if isOpen}
+                <ChevronDown />
+              {:else}
+                <ChevronRight />
+              {/if}
+            </span>
+            <span class="status-icon" aria-hidden="true">
+              {#if plugin.loaded}
+                <CheckCircle />
+              {:else}
+                <AlertCircle />
+              {/if}
+            </span>
+            <span class="plugin-name">{plugin.name}</span>
+            <span class="plugin-version">v{plugin.version}</span>
+            <span class="contribution-count" title="{totalCount} contributions">
+              {totalCount}
+            </span>
+          </button>
+
+          {#if isOpen}
+            <div class="plugin-details">
+              {#if plugin.description}
+                <p class="plugin-description">{plugin.description}</p>
+              {/if}
+              {#if plugin.author}
+                <p class="plugin-meta">
+                  <span class="meta-label">Author:</span>
+                  <span class="meta-value">{plugin.author}</span>
+                </p>
+              {/if}
+              {#if plugin.dependencies.length > 0}
+                <p class="plugin-meta">
+                  <span class="meta-label">Depends on:</span>
+                  <span class="meta-value">{plugin.dependencies.join(', ')}</span>
+                </p>
+              {/if}
+              {#if plugin.error}
+                <p class="plugin-error" role="alert">
+                  <span class="meta-label">Error:</span>
+                  <span class="meta-value">{plugin.error}</span>
+                </p>
+              {/if}
+
+              {#if groups.length === 0}
+                <p class="no-contributions">No contributions registered.</p>
+              {:else}
+                {#each groups as group (group.label)}
+                  <section class="contribution-group">
+                    <h4 class="group-label">
+                      {group.label}
+                      <span class="group-count">{group.entries.length}</span>
+                    </h4>
+                    <ul class="group-entries">
+                      {#each group.entries as entry (entry)}
+                        <li class="group-entry">{entry}</li>
+                      {/each}
+                    </ul>
+                  </section>
+                {/each}
+              {/if}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .plugin-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+  }
+
+  /* Header */
+  .plugin-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .plugin-title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .plugin-count {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 1px var(--space-2);
+    min-width: 20px;
+    text-align: center;
+  }
+
+  /* Filter */
+  .plugin-filter {
+    padding: var(--space-2) var(--space-3);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .filter-input {
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    padding: var(--space-1) var(--space-2);
+    height: 24px;
+  }
+
+  .filter-input:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+
+  /* List */
+  .plugin-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Empty state */
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-4) var(--space-3);
+    text-align: center;
+    color: var(--text-secondary);
+  }
+
+  .empty-title {
+    font-size: var(--text-base);
+    font-weight: 600;
+    margin: 0 0 var(--space-1) 0;
+  }
+
+  .empty-hint {
+    font-size: var(--text-xs);
+    margin: 0;
+    opacity: 0.8;
+  }
+
+  /* Plugin row */
+  .plugin-row {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .plugin-row--error .status-icon {
+    color: var(--accent);
+  }
+
+  .row-toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+  }
+
+  .row-toggle:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .row-toggle:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .toggle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .toggle-icon :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  .status-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    color: var(--text-secondary);
+    flex-shrink: 0;
+  }
+
+  .status-icon :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .plugin-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+    min-width: 0;
+  }
+
+  .plugin-version {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    font-family: var(--font-mono, monospace);
+    flex-shrink: 0;
+  }
+
+  .contribution-count {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0 var(--space-1);
+    min-width: 20px;
+    text-align: center;
+    flex-shrink: 0;
+  }
+
+  /* Details */
+  .plugin-details {
+    padding: var(--space-2) var(--space-3) var(--space-3)
+      calc(var(--space-3) + 20px);
+    background: var(--bg-primary);
+    border-top: 1px solid var(--border);
+  }
+
+  .plugin-description {
+    margin: 0 0 var(--space-2) 0;
+    font-size: var(--text-xs);
+    color: var(--text-primary);
+    line-height: 1.4;
+  }
+
+  .plugin-meta,
+  .plugin-error {
+    margin: 0 0 var(--space-1) 0;
+    font-size: var(--text-xs);
+    line-height: 1.4;
+  }
+
+  .plugin-error {
+    color: var(--accent);
+  }
+
+  .meta-label {
+    color: var(--text-secondary);
+    margin-right: var(--space-1);
+  }
+
+  .meta-value {
+    color: var(--text-primary);
+    font-family: var(--font-mono, monospace);
+  }
+
+  .no-contributions {
+    margin: var(--space-2) 0 0 0;
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    font-style: italic;
+  }
+
+  .contribution-group {
+    margin-top: var(--space-2);
+  }
+
+  .group-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: 0 0 var(--space-1) 0;
+    font-size: var(--text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  .group-count {
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    padding: 0 var(--space-1);
+    min-width: 18px;
+    text-align: center;
+    font-weight: 400;
+  }
+
+  .group-entries {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 0 var(--space-2);
+  }
+
+  .group-entry {
+    font-size: var(--text-xs);
+    color: var(--text-primary);
+    font-family: var(--font-mono, monospace);
+    padding: 1px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>

package/src/lib/ui/PromptDialog.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  /**
+   * PromptDialog -- reusable modal for single-line text input.
+   *
+   * Replacement for `window.prompt()`, which is broken in some desktop WebView backends.
+   * Follows the same native <dialog> pattern as NewProjectDialog so we
+   * inherit focus trapping, Escape handling, and backdrop rendering.
+   */
+
+  // --- Props ---
+
+  interface Props {
+    open: boolean;
+    title: string;
+    message: string;
+    defaultValue: string;
+    placeholder?: string;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+    /** Returns error message to display, or null if value is valid. */
+    validate?: (value: string) => string | null;
+  }
+
+  let {
+    open,
+    title,
+    message,
+    defaultValue,
+    placeholder = '',
+    onConfirm,
+    onCancel,
+    validate,
+  }: Props = $props();
+
+  // --- Local state ---
+
+  let dialogEl: HTMLDialogElement | undefined = $state();
+  let inputEl: HTMLInputElement | undefined = $state();
+  let value = $state('');
+
+  // Derived validation error (null when valid or no validator provided)
+  const error = $derived(validate ? validate(value) : null);
+  const isValid = $derived(error === null);
+
+  // Reset value whenever the dialog opens. Using the `open` prop as the
+  // dependency ensures the field is re-seeded for every invocation, even
+  // when the dialog is reused with a different defaultValue.
+  $effect(() => {
+    if (open) {
+      value = defaultValue;
+    }
+  });
+
+  // Sync native <dialog> open state with the `open` prop.
+  // Calling showModal() on an already-open dialog throws; guard with `dialogEl.open`.
+  // After showModal(), focus + select the input so Enter can immediately submit.
+  $effect(() => {
+    if (!dialogEl) return;
+    if (open && !dialogEl.open) {
+      dialogEl.showModal();
+      // Defer focus/select until after the dialog has painted. Without the
+      // microtask delay, Svelte's bind:this for inputEl may not be resolved yet.
+      queueMicrotask(() => {
+        if (inputEl) {
+          inputEl.focus();
+          inputEl.select();
+        }
+      });
+    } else if (!open && dialogEl.open) {
+      dialogEl.close();
+    }
+  });
+
+  function handleConfirm() {
+    if (!isValid) return;
+    onConfirm(value);
+    onCancel(); // closes the dialog via parent state
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleConfirm();
+    }
+  }
+
+  // Close on backdrop click: native <dialog> fires clicks on itself for the
+  // backdrop area (events on child content have a different target).
+  function handleDialogClick(e: MouseEvent) {
+    if (e.target === dialogEl) {
+      onCancel();
+    }
+  }
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  class="pw-dialog"
+  onclick={handleDialogClick}
+  onclose={onCancel}
+>
+  {#if open}
+    <div class="modal">
+      <h2 class="modal-title">{title}</h2>
+      <p class="modal-message">{message}</p>
+
+      <input
+        bind:this={inputEl}
+        bind:value
+        class="form-input"
+        class:form-input--error={!isValid}
+        type="text"
+        {placeholder}
+        onkeydown={handleKeydown}
+      />
+
+      {#if error}
+        <div class="error-message">{error}</div>
+      {/if}
+
+      <div class="modal-actions">
+        <button class="btn btn--cancel" onclick={onCancel}>Cancel</button>
+        <button
+          class="btn btn--primary"
+          disabled={!isValid}
+          onclick={handleConfirm}
+        >OK</button>
+      </div>
+    </div>
+  {/if}
+</dialog>
+
+<style>
+  /* Reset native <dialog> UA styles so it fills the viewport and lets us
+     center the inner .modal via flexbox. The backdrop is styled separately. */
+  .pw-dialog {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    max-width: none;
+    max-height: none;
+    width: 100vw;
+    height: 100vh;
+    color: inherit;
+  }
+
+  .pw-dialog[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pw-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .modal {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    box-shadow: var(--shadow-md);
+    width: 400px;
+    max-width: 90vw;
+    padding: 24px;
+    color: var(--text-primary);
+  }
+
+  .modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+  }
+
+  .modal-message {
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    margin-bottom: 12px;
+  }
+
+  .form-input {
+    width: 100%;
+    background: var(--bg-toolbar);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: var(--text-lg);
+    padding: 8px 10px;
+    box-sizing: border-box;
+  }
+
+  .form-input:focus-visible {
+    border-color: var(--accent);
+    outline: none;
+  }
+
+  .form-input--error {
+    border-color: #e05252;
+  }
+
+  .form-input--error:focus-visible {
+    border-color: #e05252;
+  }
+
+  .error-message {
+    margin-top: 6px;
+    font-size: var(--text-base);
+    color: #e05252;
+  }
+
+  .modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .btn {
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--text-lg);
+    padding: 8px 20px;
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .btn--cancel {
+    background: var(--bg-toolbar);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+  }
+
+  .btn--cancel:hover {
+    background: var(--bg-primary);
+    color: var(--text-primary);
+  }
+
+  .btn--primary {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .btn--primary:hover:not(:disabled) {
+    background: var(--accent-hover);
+  }
+
+  .btn--primary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>