@openforge-app/plugin-sdk 0.2.9 → 0.2.11

package/dist/ui/ProjectFileTree.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+  import FileTypeIcon from './FileTypeIcon.svelte'
+  import {
+    buildProjectFileTree,
+    flattenVisibleProjectFileTree,
+    formatProjectFileTreeSize,
+    getProjectFileTreeDepth,
+    getProjectFileTreeItemAccessibility,
+    getProjectFileTreeKeyboardAction,
+    projectFileTreePathToId,
+    type ProjectFileTreeNode,
+  } from '../projectFileTree'
+  import type { FileEntry } from '../domain'
+
+  interface Props {
+    entries: FileEntry[]
+    expandedDirs: Set<string>
+    selectedPath: string | null
+    onToggleDir: (path: string) => void
+    onSelectFile: (path: string) => void
+    initialScrollTop?: number
+    onScrollTopChange?: (scrollTop: number) => void
+    focusSelectedRequest?: number | null
+  }
+
+  type TreeNode = ProjectFileTreeNode<FileEntry>
+
+  const {
+    entries,
+    expandedDirs,
+    selectedPath,
+    onToggleDir,
+    onSelectFile,
+    initialScrollTop = 0,
+    onScrollTopChange,
+    focusSelectedRequest = null,
+  }: Props = $props()
+
+  let scrollContainer = $state<HTMLDivElement | null>(null)
+  let appliedInitialScrollTop = $state<number | null>(null)
+  let focusedPath = $state<string | null>(null)
+  let lastSelectedPath = $state<string | null>(null)
+  let appliedFocusSelectedRequest = $state<number | null>(null)
+
+  const treeNodes = $derived(buildProjectFileTree(entries))
+  const visibleNodes = $derived(flattenVisibleProjectFileTree(treeNodes, expandedDirs))
+  const visiblePaths = $derived(visibleNodes.map((node) => node.entry.path))
+
+  function getTreeItemElement(path: string): HTMLElement | null {
+    const index = visiblePaths.indexOf(path)
+    if (index === -1) return null
+    return scrollContainer?.querySelector<HTMLElement>(`[data-tree-index="${index}"]`) ?? null
+  }
+
+  async function focusPath(path: string) {
+    focusedPath = path
+    await tick()
+    getTreeItemElement(path)?.focus()
+  }
+
+  function activateNode(node: TreeNode) {
+    if (node.entry.isDir) {
+      void focusPath(node.entry.path)
+      onToggleDir(node.entry.path)
+    } else {
+      onSelectFile(node.entry.path)
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent, node: TreeNode) {
+    const action = getProjectFileTreeKeyboardAction(event, node, { expandedDirs, visiblePaths })
+    if (!action.handled) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    switch (action.type) {
+      case 'activate':
+        activateNode(node)
+        break
+      case 'focus':
+        void focusPath(action.path)
+        break
+      case 'toggle':
+        onToggleDir(action.path)
+        break
+      case 'none':
+        break
+    }
+  }
+
+  function handleScroll() {
+    if (scrollContainer) {
+      onScrollTopChange?.(scrollContainer.scrollTop)
+    }
+  }
+
+  $effect(() => {
+    if (scrollContainer && appliedInitialScrollTop !== initialScrollTop) {
+      scrollContainer.scrollTop = initialScrollTop
+      appliedInitialScrollTop = initialScrollTop
+    }
+  })
+
+  $effect(() => {
+    const selectedChanged = selectedPath !== lastSelectedPath
+
+    if (selectedChanged && selectedPath !== null && visiblePaths.includes(selectedPath)) {
+      focusedPath = selectedPath
+    } else if (focusedPath === null || !visiblePaths.includes(focusedPath)) {
+      focusedPath = selectedPath !== null && visiblePaths.includes(selectedPath) ? selectedPath : visiblePaths[0] ?? null
+    }
+
+    lastSelectedPath = selectedPath
+  })
+
+  $effect(() => {
+    if (focusSelectedRequest === null || appliedFocusSelectedRequest === focusSelectedRequest) return
+    appliedFocusSelectedRequest = focusSelectedRequest
+    if (selectedPath !== null && visiblePaths.includes(selectedPath)) {
+      void focusPath(selectedPath)
+    }
+  })
+</script>
+
+<div class="flex h-full flex-col border-r border-base-300 bg-base-100">
+  <div
+    class="flex-1 overflow-y-auto py-2"
+    bind:this={scrollContainer}
+    onscroll={handleScroll}
+    role="tree"
+    aria-label="Project files"
+  >
+    {#snippet renderNodes(nodes: TreeNode[])}
+      {#each nodes as node (node.entry.path)}
+        {@const entry = node.entry}
+        {@const isExpanded = expandedDirs.has(entry.path)}
+        {@const isSelected = selectedPath === entry.path}
+        {@const treeIndex = visiblePaths.indexOf(entry.path)}
+        {@const labelId = `${projectFileTreePathToId(entry.path)}-label`}
+        {@const sizeId = `${projectFileTreePathToId(entry.path)}-size`}
+        {@const a11y = getProjectFileTreeItemAccessibility(node, { expandedDirs, selectedPath, labelId, sizeId })}
+        <div
+          class="outline-none [&:focus-visible>div:first-child]:ring-2 [&:focus-visible>div:first-child]:ring-inset [&:focus-visible>div:first-child]:ring-primary/60"
+          role="treeitem"
+          tabindex={focusedPath === entry.path ? 0 : -1}
+          aria-level={a11y.level}
+          aria-setsize={a11y.setSize}
+          aria-posinset={a11y.posInSet}
+          aria-expanded={a11y.expanded}
+          aria-current={a11y.current}
+          aria-selected={a11y.selected}
+          aria-labelledby={a11y.labelledBy}
+          data-testid="tree-entry"
+          data-tree-index={treeIndex}
+          onclick={(event) => {
+            event.stopPropagation()
+            activateNode(node)
+          }}
+          onkeydown={(event) => handleKeydown(event, node)}
+          onfocus={() => {
+            focusedPath = entry.path
+          }}
+        >
+          <div
+            class="w-full flex items-center gap-2 text-xs cursor-pointer transition-colors py-1.5 pr-3 {entry.isDir ? 'text-base-content hover:bg-base-content/5' : isSelected ? 'bg-primary/10 text-primary font-medium border-l-2 border-l-primary hover:bg-primary/15' : 'text-base-content hover:bg-base-content/5'}"
+            style="padding-left: {entry.isDir || !isSelected ? 12 + getProjectFileTreeDepth(entry.path) * 16 : 10 + getProjectFileTreeDepth(entry.path) * 16}px"
+          >
+            {#if entry.isDir}
+              <span class="text-[0.6rem] text-base-content/50 shrink-0" data-testid={`dir-indicator-${entry.path}`} aria-hidden="true">{isExpanded ? '▼' : '▶'}</span>
+              <FileTypeIcon folder open={isExpanded} class="w-3.5 h-3.5" />
+              <span id={labelId} class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left" data-testid="entry-label">{entry.name}/</span>
+            {:else}
+              <FileTypeIcon filename={entry.path} class="w-3.5 h-3.5" />
+              <span id={labelId} class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left" data-testid="entry-label">{entry.name}</span>
+              <span id={sizeId} class="text-base-content/50 text-[0.7rem] ml-auto">{formatProjectFileTreeSize(entry.size)}</span>
+            {/if}
+          </div>
+
+          {#if entry.isDir && isExpanded && node.children.length > 0}
+            <div role="group">
+              {@render renderNodes(node.children)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    {/snippet}
+
+    {@render renderNodes(treeNodes)}
+  </div>
+</div>

package/dist/vite.js

@@ -4,7 +4,7 @@
  * plugin://host-runtime assets are derived from the same host-runtime contract.
  */
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { OPENFORGE_PLUGIN_SDK_PUBLIC_UI_EXPORTS } from './publicUiExports.mjs';
+import { OPENFORGE_PLUGIN_SDK_PUBLIC_ENTRYPOINTS } from './publicEntrypoints.mjs';
 import { OPENFORGE_HOST_RUNTIME_SVELTE_SPECIFIERS as HOST_RUNTIME_SVELTE_SPECIFIERS } from './svelteHostRuntimeContract.mjs';
 export const OPENFORGE_HOST_RUNTIME_SVELTE_SPECIFIERS = HOST_RUNTIME_SVELTE_SPECIFIERS;
 export const OPENFORGE_HOST_SHARED_SVELTE_IMPORTS = OPENFORGE_HOST_RUNTIME_SVELTE_SPECIFIERS;
@@ -26,22 +26,12 @@ export function isOpenForgeHostRuntimeExternal(id) {
 }
 export const openforgePluginViteExternals = isOpenForgeHostRuntimeExternal;
 const OPENFORGE_PLUGIN_SDK_SOURCE_ENTRYPOINTS = Object.freeze([
-    ['@openforge-app/plugin-sdk/frontend', 'packages/plugin-sdk/src/frontend.ts'],
-    ['@openforge-app/plugin-sdk/backend', 'packages/plugin-sdk/src/backend.ts'],
-    ['@openforge-app/plugin-sdk/testing', 'packages/plugin-sdk/src/testing.ts'],
-    ['@openforge-app/plugin-sdk/vite', 'packages/plugin-sdk/src/vite.ts'],
-    ['@openforge-app/plugin-sdk/package-metadata-schema.json', 'packages/plugin-sdk/src/openforgePackageMetadataSchema.json'],
-    ['@openforge-app/plugin-sdk/domain', 'packages/plugin-sdk/src/domain.ts'],
-    ['@openforge-app/plugin-sdk/prStatusPresentation', 'packages/plugin-sdk/src/prStatusPresentation.ts'],
-    ['@openforge-app/plugin-sdk/markdown', 'packages/plugin-sdk/src/markdown.ts'],
-    ['@openforge-app/plugin-sdk/numberParsing', 'packages/plugin-sdk/src/numberParsing.ts'],
-    ['@openforge-app/plugin-sdk/projectFileTree', 'packages/plugin-sdk/src/projectFileTree.ts'],
-    ['@openforge-app/plugin-sdk/sanitize', 'packages/plugin-sdk/src/sanitize.ts'],
-    ['@openforge-app/plugin-sdk/pluginIcons', 'packages/plugin-sdk/src/pluginIcons.ts'],
-    ['@openforge-app/plugin-sdk/fileIcons', 'packages/plugin-sdk/src/fileIcons.ts'],
-    ['@openforge-app/plugin-sdk/collapsibleSectionState', 'packages/plugin-sdk/src/collapsibleSectionState.ts'],
-    ...OPENFORGE_PLUGIN_SDK_PUBLIC_UI_EXPORTS.map(({ importSpecifier, workspaceSourcePath }) => [importSpecifier, workspaceSourcePath]),
-    ['@openforge-app/plugin-sdk', 'packages/plugin-sdk/src/index.ts'],
+    ...OPENFORGE_PLUGIN_SDK_PUBLIC_ENTRYPOINTS
+        .filter(({ packageSubpath }) => packageSubpath !== '.')
+        .map(({ importSpecifier, workspaceSourcePath }) => [importSpecifier, workspaceSourcePath]),
+    ...OPENFORGE_PLUGIN_SDK_PUBLIC_ENTRYPOINTS
+        .filter(({ packageSubpath }) => packageSubpath === '.')
+        .map(({ importSpecifier, workspaceSourcePath }) => [importSpecifier, workspaceSourcePath]),
 ]);
 function repoRootUrl(repoRoot) {
     if (repoRoot instanceof URL) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openforge-app/plugin-sdk",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -68,15 +68,21 @@
       "types": "./dist/collapsibleSectionState.d.ts",
       "default": "./dist/collapsibleSectionState.js"
     },
+    "./taskBrowserDevToolsShortcuts": {
+      "types": "./dist/taskBrowserDevToolsShortcuts.d.ts",
+      "default": "./dist/taskBrowserDevToolsShortcuts.js"
+    },
     "./ui/Button.svelte": "./dist/ui/Button.svelte",
     "./ui/Checkbox.svelte": "./dist/ui/Checkbox.svelte",
     "./ui/MarkdownContent.svelte": "./dist/ui/MarkdownContent.svelte",
     "./ui/ResizablePanel.svelte": "./dist/ui/ResizablePanel.svelte",
     "./ui/Modal.svelte": "./dist/ui/Modal.svelte",
     "./ui/PluginPageHeader.svelte": "./dist/ui/PluginPageHeader.svelte",
+    "./ui/PluginPageShell.svelte": "./dist/ui/PluginPageShell.svelte",
     "./ui/PluginViewState.svelte": "./dist/ui/PluginViewState.svelte",
     "./ui/PluginSidebarLink.svelte": "./dist/ui/PluginSidebarLink.svelte",
     "./ui/FileTypeIcon.svelte": "./dist/ui/FileTypeIcon.svelte",
+    "./ui/ProjectFileTree.svelte": "./dist/ui/ProjectFileTree.svelte",
     "./ui/CollapsibleSection.svelte": "./dist/ui/CollapsibleSection.svelte"
   },
   "files": [
@@ -88,15 +94,16 @@
     "access": "public"
   },
   "dependencies": {
-    "dompurify": "^3.4.13",
-    "marked": "^18.0.10"
+    "dompurify": "^3.4.14",
+    "marked": "^18.0.11",
+    "mermaid": "^11.17.2"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@types/node": "26.2.0",
-    "svelte": "5.56.9",
+    "@types/node": "26.3.0",
+    "svelte": "5.56.10",
     "semver": "^7.8.5",
     "typescript": "^7.0.2",
     "vitest": "^4.1.11",
@@ -104,7 +111,8 @@
   },
   "scripts": {
     "clean": "node -e \"import('node:fs').then(({ rmSync }) => rmSync('dist', { recursive: true, force: true }))\"",
-    "build": "pnpm run clean && tsc && pnpm run build:assets",
+    "check:entrypoints": "node ./scripts/check-entrypoint-registries.mjs",
+    "build": "pnpm run check:entrypoints && pnpm run clean && tsc && pnpm run build:assets",
     "build:assets": "node ./scripts/copy-package-assets.mjs",
     "check:contract": "node ./scripts/check-published-contract.mjs",
     "icons:generate": "node ./scripts/generate-file-type-icons.mjs",