@kestack/web-platform 0.0.0-stage → 0.0.1

package/src/components/viewers/git-changes/git-changes.tsx

@@ -0,0 +1,287 @@
+import { useState } from 'react';
+import type { Branch, ChangeStatus } from 'laymos';
+
+import { ChevronDown, GitBranch, Search } from '#lib/lucide';
+import { Input } from '#components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import { cn } from '#lib/utils';
+
+export interface GitOptions {
+  // Off hides the change overlay entirely, whatever git reports.
+  readonly showChanges: boolean;
+  readonly includeUnchanged: boolean;
+  // Owners the change deleted, shown where they stood; offered only where a
+  // caller can show them.
+  readonly includeDeleted: boolean;
+}
+
+export const defaultGitOptions: GitOptions = {
+  showChanges: true,
+  includeUnchanged: true,
+  includeDeleted: true,
+};
+
+// The Base ref 'HEAD' means the working tree's uncommitted changes; any other
+// value is a branch name, whose Change set already carries uncommitted work
+// on top, since a Base ref diffs against the working tree, never a commit.
+export const uncommittedBaseRef = 'HEAD';
+
+const changeLabels: Readonly<Record<ChangeStatus, string>> = {
+  added: 'New',
+  modified: 'Modified',
+  deleted: 'Deleted',
+};
+
+const changeShortLabels: Readonly<Record<ChangeStatus, string>> = {
+  added: 'new',
+  modified: 'mod',
+  deleted: 'del',
+};
+
+export function changeSurfaceClass(status: ChangeStatus | undefined): string {
+  switch (status) {
+    case 'added':
+      return 'border-green-500 ring-1 ring-green-500/40';
+    case 'modified':
+      return 'border-amber-500 ring-1 ring-amber-500/40';
+    case 'deleted':
+      return 'border-red-500 ring-1 ring-red-500/40';
+    default:
+      return '';
+  }
+}
+
+export function ChangeBadge({
+  status,
+  label = changeShortLabels[status],
+  className,
+}: {
+  readonly status: ChangeStatus;
+  readonly label?: string;
+  readonly className?: string;
+}) {
+  return (
+    <span
+      title={changeLabels[status]}
+      className={cn(
+        'shrink-0 rounded-sm border px-1 py-px text-[9px] font-semibold uppercase tracking-wider',
+        status === 'added'
+          ? 'border-green-500/60 text-green-600 dark:text-green-400'
+          : status === 'deleted'
+            ? 'border-red-500/60 text-red-600 dark:text-red-400'
+            : 'border-amber-500/60 text-amber-600 dark:text-amber-400',
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+/**
+ * Derives each owner's standing in a Change set from the files it owns: added
+ * when every owned file is added, modified when any is added or modified.
+ * Owners with no changed file are absent.
+ */
+export function rollUpChanges(
+  membership: ReadonlyMap<string, string>,
+  files: ReadonlyMap<string, ChangeStatus>,
+): ReadonlyMap<string, ChangeStatus> {
+  const total = new Map<string, number>();
+  const added = new Map<string, number>();
+  const touched = new Set<string>();
+
+  for (const [file, owner] of membership) {
+    total.set(owner, (total.get(owner) ?? 0) + 1);
+    const status = files.get(file);
+    if (status === undefined) continue;
+    touched.add(owner);
+    if (status === 'added') added.set(owner, (added.get(owner) ?? 0) + 1);
+  }
+
+  const rolled = new Map<string, ChangeStatus>();
+  for (const owner of touched) {
+    rolled.set(
+      owner,
+      added.get(owner) === total.get(owner) ? 'added' : 'modified',
+    );
+  }
+  return rolled;
+}
+
+export function changedPathsUnder(
+  files: ReadonlyMap<string, ChangeStatus>,
+  prefixes: string | readonly string[],
+): ReadonlyMap<string, ChangeStatus> {
+  const list = typeof prefixes === 'string' ? [prefixes] : prefixes;
+  const owned = new Map<string, ChangeStatus>();
+  for (const [path, status] of files) {
+    if (
+      list.some((prefix) => path === prefix || path.startsWith(`${prefix}/`))
+    ) {
+      owned.set(path, status);
+    }
+  }
+  return owned;
+}
+
+/**
+ * The git comparison menu every Tool shows: whether changes are drawn,
+ * whether unchanged owners stay visible, and which Base ref they are measured
+ * against. `ownerLabel` names what the Tool marks, such as "modules".
+ */
+export function ChangesMenu({
+  options,
+  baseRef,
+  branches,
+  hasChanges,
+  ownerLabel,
+  offerDeleted = false,
+  onOptionsChange,
+  onBaseRefChange,
+}: {
+  readonly options: GitOptions;
+  readonly baseRef: string;
+  readonly branches: readonly Branch[];
+  readonly hasChanges: boolean;
+  readonly ownerLabel: string;
+  /** Offer Include deleted, for a caller that shows deleted owners. */
+  readonly offerDeleted?: boolean;
+  readonly onOptionsChange: (options: GitOptions) => void;
+  readonly onBaseRefChange?: (baseRef: string) => void;
+}) {
+  const [branchSearch, setBranchSearch] = useState('');
+  const filteredBranches = branches.filter(({ name }) =>
+    name.toLocaleLowerCase().includes(branchSearch.trim().toLocaleLowerCase()),
+  );
+  const comparing =
+    baseRef === uncommittedBaseRef ? 'Uncommitted changes' : baseRef;
+  const summary = !options.showChanges
+    ? 'Git changes off'
+    : hasChanges
+      ? comparing
+      : `No changes · ${comparing}`;
+  return (
+    <DropdownMenu
+      onOpenChange={(open) => {
+        if (!open) setBranchSearch('');
+      }}
+    >
+      <DropdownMenuTrigger
+        aria-label="Git comparison options"
+        title="Git comparison options"
+        className="flex size-9 items-center justify-center gap-2 rounded-md border border-border/60 bg-background text-sm text-foreground outline-none transition-colors hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/40 md:h-8 md:w-auto md:max-w-56 md:justify-between md:px-2.5"
+      >
+        <GitBranch className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="hidden truncate md:inline">{summary}</span>
+        <ChevronDown className="hidden size-3.5 shrink-0 text-muted-foreground md:block" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-[min(20rem,calc(100vw-1rem))]"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>Git changes</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            className="min-h-11 md:min-h-8"
+            checked={options.showChanges}
+            onCheckedChange={(showChanges) =>
+              onOptionsChange({ ...options, showChanges })
+            }
+          >
+            Show git changes
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            className="min-h-11 md:min-h-8"
+            checked={options.includeUnchanged}
+            disabled={!options.showChanges}
+            onCheckedChange={(includeUnchanged) =>
+              onOptionsChange({ ...options, includeUnchanged })
+            }
+          >
+            Include unchanged {ownerLabel}
+          </DropdownMenuCheckboxItem>
+          {offerDeleted && (
+            <DropdownMenuCheckboxItem
+              className="min-h-11 md:min-h-8"
+              checked={options.includeDeleted}
+              disabled={!options.showChanges}
+              onCheckedChange={(includeDeleted) =>
+                onOptionsChange({ ...options, includeDeleted })
+              }
+            >
+              Include deleted {ownerLabel}
+            </DropdownMenuCheckboxItem>
+          )}
+        </DropdownMenuGroup>
+        {options.showChanges && onBaseRefChange !== undefined && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Compare against</DropdownMenuLabel>
+              <DropdownMenuRadioGroup
+                value={baseRef}
+                onValueChange={onBaseRefChange}
+              >
+                <DropdownMenuRadioItem
+                  className="min-h-11 md:min-h-8"
+                  value={uncommittedBaseRef}
+                >
+                  Uncommitted changes
+                </DropdownMenuRadioItem>
+                {branches.length > 0 && (
+                  <div
+                    className="relative px-1.5 py-1"
+                    onKeyDown={(event) => event.stopPropagation()}
+                  >
+                    <Search className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                      value={branchSearch}
+                      onChange={(event) => setBranchSearch(event.target.value)}
+                      placeholder="Search branches…"
+                      aria-label="Search branches"
+                      className="h-11 pl-9 text-base md:h-9 md:text-sm"
+                    />
+                  </div>
+                )}
+                <div className="max-h-56 overflow-y-auto">
+                  {filteredBranches.map((branch) => (
+                    <DropdownMenuRadioItem
+                      className="min-h-11 md:min-h-8"
+                      key={branch.name}
+                      value={branch.name}
+                    >
+                      <span className="min-w-0 flex-1 truncate">
+                        {branch.name}
+                      </span>
+                      {branch.current && (
+                        <span className="text-xs text-muted-foreground">
+                          Current
+                        </span>
+                      )}
+                    </DropdownMenuRadioItem>
+                  ))}
+                  {filteredBranches.length === 0 && branches.length > 0 && (
+                    <p className="px-2 py-3 text-center text-sm text-muted-foreground">
+                      No matching branches
+                    </p>
+                  )}
+                </div>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuGroup>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/viewers/git-changes/index.ts

@@ -0,0 +1,11 @@
+// Tools draw a Change set with these shared markers and one comparison menu.
+export {
+  ChangeBadge,
+  ChangesMenu,
+  changeSurfaceClass,
+  defaultGitOptions,
+  uncommittedBaseRef,
+} from './git-changes';
+export type { GitOptions } from './git-changes';
+// Tools map changed files onto whatever owns them: Modules, Layers, Packages.
+export { changedPathsUnder, rollUpChanges } from './git-changes';

package/src/components/viewers/json/index.ts

@@ -0,0 +1,3 @@
+export { JsonEditor, type JsonEditorProps } from './json-editor';
+export { JsonTree } from './json-tree';
+export { JsonViewer, type JsonViewerProps } from './json-viewer';

package/src/components/viewers/json/json-editor.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useMemo, useState } from 'react';
+import CodeMirror, { EditorView, Prec } from '@uiw/react-codemirror';
+import { json } from '@codemirror/lang-json';
+import { xcodeDark, xcodeLight } from '@uiw/codemirror-theme-xcode';
+import { cn } from '#lib/utils';
+
+export type JsonEditorProps = {
+  value: string;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+  minHeight?: string;
+  maxHeight?: string;
+};
+
+const baseTheme = EditorView.theme({
+  '&': { backgroundColor: 'transparent', fontSize: '13px' },
+  '.cm-gutters': { backgroundColor: 'transparent', border: 'none' },
+  '.cm-content': { lineHeight: '1.7' },
+  '.cm-line': { lineHeight: '1.7' },
+  '&.cm-focused': { outline: 'none' },
+  '.cm-scroller': { overflow: 'auto' },
+});
+
+function readDarkMode(): boolean {
+  if (typeof document === 'undefined') return false;
+  return getComputedStyle(document.body).colorScheme === 'dark';
+}
+
+function useDarkMode(): boolean {
+  const [dark, setDark] = useState(readDarkMode);
+
+  useEffect(() => {
+    const update = () => setDark(readDarkMode());
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    update();
+    return () => observer.disconnect();
+  }, []);
+
+  return dark;
+}
+
+/** Controlled JSON editor backed by CodeMirror. */
+export function JsonEditor({
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  className,
+  minHeight,
+  maxHeight,
+}: JsonEditorProps) {
+  const dark = useDarkMode();
+  const isReadOnly = readOnly ?? onChange == null;
+  const extensions = useMemo(
+    () => [json(), EditorView.lineWrapping, Prec.highest(baseTheme)],
+    [],
+  );
+  const fill = minHeight == null && maxHeight == null;
+
+  return (
+    <CodeMirror
+      value={value}
+      onChange={onChange}
+      readOnly={isReadOnly}
+      editable={!isReadOnly}
+      theme={dark ? xcodeDark : xcodeLight}
+      placeholder={placeholder}
+      extensions={extensions}
+      height={fill ? '100%' : undefined}
+      minHeight={minHeight}
+      maxHeight={maxHeight}
+      basicSetup={{
+        lineNumbers: false,
+        foldGutter: false,
+        highlightActiveLine: !isReadOnly,
+        highlightActiveLineGutter: false,
+      }}
+      className={cn(
+        'border-border overflow-hidden rounded-md border bg-transparent',
+        className,
+      )}
+    />
+  );
+}

package/src/components/viewers/json/json-tree.tsx

@@ -0,0 +1,110 @@
+import JsonView from '@uiw/react-json-view';
+
+const JSON_FONT_SIZE = 14;
+const JSON_FONT_SIZE_ROOMY = 15;
+
+const baseJsonViewStyle = {
+  lineHeight: 1.6,
+  '--w-rjv-font-family':
+    'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  '--w-rjv-color': 'var(--foreground)',
+  '--w-rjv-key-string': 'var(--muted-foreground)',
+  '--w-rjv-background-color': 'transparent',
+  '--w-rjv-line-color': 'var(--border)',
+  '--w-rjv-arrow-color': 'var(--muted-foreground)',
+  '--w-rjv-edit-color': 'var(--muted-foreground)',
+  '--w-rjv-info-color': 'var(--muted-foreground)',
+  '--w-rjv-update-color': 'var(--muted-foreground)',
+  '--w-rjv-curlybraces-color': 'var(--muted-foreground)',
+  '--w-rjv-brackets-color': 'var(--muted-foreground)',
+  '--w-rjv-quotes-color': 'var(--muted-foreground)',
+  // Values are content: full foreground in both themes. Only nothing-values
+  // are dimmed, and only the broken ones are red.
+  '--w-rjv-quotes-string-color': 'var(--foreground)',
+  '--w-rjv-type-string-color': 'var(--foreground)',
+  '--w-rjv-type-int-color': 'var(--foreground)',
+  '--w-rjv-type-float-color': 'var(--foreground)',
+  '--w-rjv-type-bigint-color': 'var(--foreground)',
+  '--w-rjv-type-boolean-color': 'var(--foreground)',
+  '--w-rjv-type-date-color': 'var(--foreground)',
+  '--w-rjv-type-url-color': 'var(--foreground)',
+  '--w-rjv-type-null-color': 'var(--muted-foreground)',
+  '--w-rjv-type-undefined-color': 'var(--muted-foreground)',
+  '--w-rjv-type-nan-color': 'var(--destructive)',
+} as React.CSSProperties;
+
+// Code-like colors, for reading data structure at a glance: keys muted, each
+// kind of value its own hue.
+const syntaxJsonViewStyle = {
+  '--w-rjv-quotes-string-color': 'var(--positive)',
+  '--w-rjv-type-string-color': 'var(--positive)',
+  '--w-rjv-type-int-color': 'var(--chart-8)',
+  '--w-rjv-type-float-color': 'var(--chart-8)',
+  '--w-rjv-type-bigint-color': 'var(--chart-8)',
+  '--w-rjv-type-boolean-color': 'var(--chart-9)',
+  '--w-rjv-type-date-color': 'var(--chart-7)',
+  '--w-rjv-type-url-color': 'var(--chart-7)',
+} as React.CSSProperties;
+
+function normalizeJsonStrings(value: unknown): unknown {
+  if (value === null || value === undefined) return value;
+  if (typeof value === 'string') {
+    if (value.length < 2) return value;
+    const first = value[0];
+    if (first !== '{' && first !== '[') return value;
+    try {
+      const parsed = JSON.parse(value);
+      if (parsed !== null && typeof parsed === 'object') {
+        return normalizeJsonStrings(parsed);
+      }
+      return value;
+    } catch {
+      return value;
+    }
+  }
+  if (Array.isArray(value)) return value.map(normalizeJsonStrings);
+  if (typeof value === 'object') {
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+      out[k] = normalizeJsonStrings(v);
+    }
+    return out;
+  }
+  return value;
+}
+
+interface JsonTreeProps {
+  value: object;
+  collapsed?: number | boolean;
+  size?: 'compact' | 'roomy';
+  /** `plain` keeps values in the text color; `syntax` colors them by kind. */
+  tone?: 'plain' | 'syntax';
+}
+
+export function JsonTree({
+  value,
+  collapsed = 2,
+  size = 'compact',
+  tone = 'plain',
+}: JsonTreeProps) {
+  const normalized = normalizeJsonStrings(value) as object;
+  const style = {
+    ...baseJsonViewStyle,
+    ...(tone === 'syntax' ? syntaxJsonViewStyle : {}),
+    fontSize: size === 'roomy' ? JSON_FONT_SIZE_ROOMY : JSON_FONT_SIZE,
+  } as React.CSSProperties;
+  return (
+    <div className="min-w-0 [&_.w-rjv]:!overflow-visible [&_.w-rjv-inner]:!overflow-visible [&_.w-rjv-line]:!whitespace-normal [&_.w-rjv-line]:break-all [&_.w-rjv-value]:!whitespace-pre-wrap [&_.w-rjv-value]:break-all">
+      <JsonView
+        value={normalized}
+        style={style}
+        collapsed={collapsed}
+        displayDataTypes={false}
+        displayObjectSize={false}
+        enableClipboard={false}
+        indentWidth={size === 'roomy' ? 18 : 14}
+        shortenTextAfterLength={0}
+      />
+    </div>
+  );
+}

package/src/components/viewers/json/json-viewer.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '#components/ui/button';
+import { CheckIcon, CopyIcon } from '#lib/lucide';
+import { JsonEditor } from './json-editor';
+
+export type JsonViewerProps = {
+  value: unknown;
+  label?: string;
+  maxHeight?: string;
+};
+
+/** Read-only JSON view with a copy-to-clipboard button. */
+export function JsonViewer({
+  value,
+  label,
+  maxHeight = '400px',
+}: JsonViewerProps) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const json = useMemo(() => JSON.stringify(value, null, 2), [value]);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  const copy = () => {
+    void navigator.clipboard.writeText(json);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setCopied(true);
+    timerRef.current = setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <div className="flex min-h-8 items-center justify-between border-b px-2">
+        <span className="px-1 text-xs font-medium text-muted-foreground">
+          {label}
+        </span>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-xs"
+          onClick={copy}
+          aria-label="Copy JSON"
+          title="Copy JSON"
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </Button>
+      </div>
+      <JsonEditor
+        value={json}
+        readOnly
+        maxHeight={maxHeight}
+        className="rounded-none border-0"
+      />
+    </div>
+  );
+}

package/src/components/viewers/markdown-viewer/index.ts

@@ -0,0 +1 @@
+export { MarkdownViewer } from './markdown-viewer';

package/src/components/viewers/markdown-viewer/markdown-viewer.tsx

@@ -0,0 +1,83 @@
+import type { ComponentProps, MouseEvent } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+import { SourceViewer } from '../source-viewer/index';
+import { scrollbarStyles } from '#lib/scrollStyles';
+import { cn } from '#lib/utils';
+
+export function MarkdownViewer({
+  children,
+  className,
+  onLinkClick,
+}: {
+  readonly children: string;
+  readonly className?: string;
+  // Return true to take over the navigation for that href.
+  readonly onLinkClick?: (href: string) => boolean | void;
+}) {
+  return (
+    <div className={cn('prose dark:prose-invert max-w-none', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          a: ({ href, children, node: _node, ...rest }) => (
+            <a
+              href={href}
+              {...rest}
+              onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+                if (href !== undefined && onLinkClick?.(href) === true) {
+                  event.preventDefault();
+                }
+              }}
+            >
+              {children}
+            </a>
+          ),
+          pre: ({ children }) => <>{children}</>,
+          code: MarkdownCode,
+          table: ({ children }) => (
+            <div
+              className={cn('not-prose my-4 overflow-x-auto', scrollbarStyles)}
+            >
+              <table className="w-full border-collapse text-sm">
+                {children}
+              </table>
+            </div>
+          ),
+          th: ({ children }) => (
+            <th className="border-b border-border px-3 py-2 text-left font-semibold">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="border-b border-border/50 px-3 py-2 align-top">
+              {children}
+            </td>
+          ),
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+function MarkdownCode({ className, children }: ComponentProps<'code'>) {
+  const language = /language-(\w+)/.exec(className ?? '')?.[1];
+  if (language === undefined) {
+    return <code className={className}>{children}</code>;
+  }
+  return (
+    <div className="not-prose my-3">
+      <SourceViewer
+        filePath={`snippet.${language}`}
+        content={String(children).replace(/\n$/, '')}
+        autoHeight
+        showHeader={false}
+        showLineNumbers={false}
+        className="rounded-lg border border-border"
+      />
+    </div>
+  );
+}

package/src/components/viewers/source-explorer/index.ts

@@ -0,0 +1,11 @@
+// Tools open one scope's documentation and files, with diffs, in this dialog.
+export { SourceExplorer } from './source-explorer';
+export type {
+  ChangedPaths,
+  DocumentationSlot,
+  LoadFileDiff,
+  LoadFiles,
+  SourceExplorerProps,
+  SourceExplorerTab,
+  SourceFile,
+} from './source-explorer';

package/src/components/viewers/source-explorer/initial-selection.ts

@@ -0,0 +1,21 @@
+// Opens on the requested file, else the first changed file, else the entry
+// point, else the first file in path order.
+export function initialSourceFile(
+  files: readonly { readonly path: string }[],
+  entryPoint?: string,
+  requestedPath?: string,
+  changedPaths?: ReadonlyMap<string, unknown>,
+): string | undefined {
+  const paths = files
+    .map(({ path }) => path)
+    .sort((left, right) => left.localeCompare(right));
+  if (requestedPath !== undefined && paths.includes(requestedPath)) {
+    return requestedPath;
+  }
+  const firstChanged = paths.find((path) => changedPaths?.has(path));
+  if (firstChanged !== undefined) return firstChanged;
+  if (entryPoint !== undefined && paths.includes(entryPoint)) {
+    return entryPoint;
+  }
+  return paths[0];
+}