@nextop-os/workspace-issue-manager 0.0.26 → 0.0.27

package/dist/{chunk-K3F67IRA.js → chunk-5V4DIEWZ.js}

@@ -25,7 +25,7 @@ import {
   toContextRefInput,
   toIssueManagerWorkspaceFileLinkInput,
   uniqueIssueManagerFileReferences
-} from "./chunk-34KSO5F6.js";
+} from "./chunk-LJQG24Y2.js";
 import {
   appendIssueManagerWorkspaceFileLinksToContent,
   clampIssueManagerSidebarWidth,
@@ -36,7 +36,7 @@ import {
   issueManagerSidebarMinWidth,
   normalizeIssueManagerContent,
   shouldAutoCollapseIssueManagerSidebar
-} from "./chunk-RJ6HZRQU.js";
+} from "./chunk-MCVRP7RR.js";
 
 // src/ui/react/internal/shell/IssueManagerNodeState.ts
 import { useEffect, useEffectEvent, useState } from "react";
@@ -1402,6 +1402,10 @@ function useIssueManagerNodeView({
 
 // src/ui/react/internal/reference/useIssueManagerReferencePickerView.ts
 import { useEffect as useEffect3, useEffectEvent as useEffectEvent2, useMemo as useMemo3, useState as useState2 } from "react";
+import {
+  createWorkspaceFilePreviewLoadedState,
+  resolveWorkspaceFilePreviewReadiness
+} from "@nextop-os/workspace-file-preview";
 var defaultDirectoryPath = "/";
 function useIssueManagerReferencePickerView({
   fileAdapter,
@@ -1420,6 +1424,7 @@ function useIssueManagerReferencePickerView({
   const [selectedRefs, setSelectedRefs] = useState2(
     []
   );
+  const [previewState, setPreviewState] = useState2({ status: "empty" });
   const supportsSearch = hasFileAdapterMethod2(fileAdapter, "searchReferences");
   const supportsTreeSnapshot = hasFileAdapterMethod2(
     fileAdapter,
@@ -1579,6 +1584,73 @@ function useIssueManagerReferencePickerView({
     });
   }, [open, visibleEntries]);
   const focusedEntry = visibleEntries.find((entry) => entry.path === focusedPath) ?? selectedRefs.find((entry) => entry.path === focusedPath) ?? null;
+  useEffect3(() => {
+    if (!open || !focusedEntry) {
+      setPreviewState({ status: "empty" });
+      return;
+    }
+    const readiness = resolveWorkspaceFilePreviewReadiness(focusedEntry);
+    if (readiness.status === "directory") {
+      setPreviewState({ reference: focusedEntry, status: "directory" });
+      return;
+    }
+    if (readiness.status === "unsupported") {
+      setPreviewState({ reference: focusedEntry, status: "unsupported" });
+      return;
+    }
+    if (readiness.status === "readonly") {
+      setPreviewState({
+        maxSizeBytes: readiness.maxSizeBytes,
+        reason: readiness.reason,
+        reference: focusedEntry,
+        status: "readonly"
+      });
+      return;
+    }
+    if (!fileAdapter?.readReferencePreview) {
+      setPreviewState({ reference: focusedEntry, status: "unavailable" });
+      return;
+    }
+    const previewTarget = readiness.target;
+    let canceled = false;
+    let objectUrl = null;
+    setPreviewState({ reference: focusedEntry, status: "loading" });
+    const load = async () => {
+      try {
+        const preview = await fileAdapter.readReferencePreview?.({
+          reference: focusedEntry,
+          workspaceId
+        });
+        if (canceled) {
+          return;
+        }
+        if (!preview) {
+          setPreviewState({ reference: focusedEntry, status: "unsupported" });
+          return;
+        }
+        const nextState = createReferencePreviewState(
+          focusedEntry,
+          previewTarget,
+          preview
+        );
+        if (nextState.status === "image") {
+          objectUrl = nextState.objectUrl;
+        }
+        setPreviewState(nextState);
+      } catch {
+        if (!canceled) {
+          setPreviewState({ reference: focusedEntry, status: "error" });
+        }
+      }
+    };
+    void load();
+    return () => {
+      canceled = true;
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [fileAdapter, focusedEntry, open, workspaceId]);
   const toggleRef = (ref) => {
     setSelectedRefs((current) => {
       const existing = current.some((item) => item.path === ref.path);
@@ -1645,6 +1717,7 @@ function useIssueManagerReferencePickerView({
     focusedPath,
     isLoading,
     mode,
+    previewState,
     searchQuery,
     selectedRefs,
     visibleEntries,
@@ -1654,6 +1727,41 @@ function useIssueManagerReferencePickerView({
     toggleRef
   };
 }
+function createReferencePreviewState(reference, target, preview) {
+  const loadedState = createWorkspaceFilePreviewLoadedState({
+    bytes: preview.bytes,
+    contentType: preview.contentType,
+    entry: reference,
+    target: {
+      ...target,
+      fileKind: preview.kind
+    }
+  });
+  if (loadedState.status === "image") {
+    return {
+      objectUrl: URL.createObjectURL(
+        new Blob([loadedState.bytes], {
+          type: loadedState.contentType
+        })
+      ),
+      reference,
+      status: "image"
+    };
+  }
+  if (loadedState.status === "text") {
+    return {
+      content: loadedState.content,
+      reference,
+      status: "text"
+    };
+  }
+  return {
+    maxSizeBytes: loadedState.maxSizeBytes,
+    reason: loadedState.reason,
+    reference,
+    status: "readonly"
+  };
+}
 function hasFileAdapterMethod2(fileAdapter, methodName) {
   return typeof Reflect.get(fileAdapter ?? {}, methodName) === "function";
 }
@@ -1678,8 +1786,11 @@ import {
   Badge,
   Button as Button2,
   FileIcon as FileIcon2,
-  FolderFilledIcon as FolderFilledIcon2
+  FolderFilledIcon as FolderFilledIcon2,
+  LoadingIcon
 } from "@nextop-os/ui-system";
+import { formatWorkspacePreviewByteLimit } from "@nextop-os/workspace-file-preview";
+import { WorkspaceFilePreviewSurface as SharedWorkspaceFilePreviewSurface } from "@nextop-os/workspace-file-preview/react";
 
 // src/ui/internal/reference/IssueManagerReferencePickerTree.tsx
 import { useEffect as useEffect4, useState as useState3 } from "react";
@@ -1980,19 +2091,123 @@ var issueManagerReferencePickerSelectedBadgeClassName = "max-w-[14rem] rounded-[
 function IssueManagerReferencePickerPreviewPane({
   copy,
   focusedEntry,
-  mode
+  mode,
+  previewState
 }) {
   return /* @__PURE__ */ jsx2("aside", { className: "flex shrink-0 flex-col border-t border-[var(--line-1)] bg-[var(--background-fronted)] lg:min-h-0 lg:flex-1 lg:border-t-0", children: /* @__PURE__ */ jsx2("div", { className: "flex min-h-0 flex-1 flex-col px-4 py-4 sm:px-5 lg:py-5", children: focusedEntry ? /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-col gap-4 lg:flex-1 lg:gap-5", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-32 flex-col items-center justify-center space-y-4 rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)] px-5 py-8 text-center sm:min-h-40 sm:py-10 lg:min-h-56 lg:py-14", children: [
-      focusedEntry.kind === "folder" ? /* @__PURE__ */ jsx2(FolderFilledIcon2, { className: "mx-auto size-9 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx2(FileIcon2, { className: "mx-auto size-9 text-[var(--text-tertiary)]" }),
-      /* @__PURE__ */ jsx2("p", { className: "mx-auto max-w-[24ch] text-sm leading-5 text-[var(--text-secondary)] [overflow-wrap:anywhere]", children: focusedEntry.kind === "folder" ? focusedEntry.path : resolveIssueManagerReferenceLabel(focusedEntry) })
-    ] }),
+    /* @__PURE__ */ jsx2(
+      IssueManagerReferencePreviewSurface,
+      {
+        copy,
+        focusedEntry,
+        previewState
+      }
+    ),
     /* @__PURE__ */ jsx2("div", { className: "space-y-2 lg:space-y-3", children: /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsx2("p", { className: "truncate text-[15px] font-semibold text-[var(--text-primary)]", children: resolveIssueManagerReferenceLabel(focusedEntry) }),
       /* @__PURE__ */ jsx2("p", { className: "line-clamp-3 text-sm text-[var(--text-secondary)] [overflow-wrap:anywhere]", children: focusedEntry.path })
     ] }) })
   ] }) : /* @__PURE__ */ jsx2(IssueManagerReferencePickerFeedback2, { children: mode === "search" ? copy.t("referencePicker.emptySearch") : copy.t("referencePicker.emptyDirectory") }) }) });
 }
+function IssueManagerReferencePreviewSurface({
+  copy,
+  focusedEntry,
+  previewState
+}) {
+  return /* @__PURE__ */ jsx2(
+    SharedWorkspaceFilePreviewSurface,
+    {
+      directoryMessage: copy.t("referencePicker.previewFolder"),
+      emptyMessage: copy.t("referencePicker.previewUnavailable"),
+      frameClassName: "flex min-h-32 flex-col items-center justify-center overflow-hidden rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)] px-5 py-8 text-center sm:min-h-40 sm:py-10 lg:min-h-56 lg:py-14",
+      imageAlt: resolveIssueManagerReferenceLabel,
+      imageFrameClassName: "p-4",
+      loadingIndicator: /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-11 place-items-center rounded-[6px] bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx2(LoadingIcon, { className: "size-4 animate-spin" }) }),
+      loadingMessage: copy.t("referencePicker.previewLoading"),
+      messageClassName: "mx-auto max-w-[24ch] text-sm leading-5 text-[var(--text-secondary)] [overflow-wrap:anywhere]",
+      renderIcon: (entry) => entry.kind === "folder" ? /* @__PURE__ */ jsx2(FolderFilledIcon2, { className: "mx-auto size-9 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx2(FileIcon2, { className: "mx-auto size-9 text-[var(--text-tertiary)]" }),
+      state: resolveIssueManagerReferenceSurfaceState(
+        copy,
+        focusedEntry,
+        previewState
+      ),
+      textClassName: "h-full overflow-auto p-4 text-left text-xs leading-5 whitespace-pre-wrap break-words text-[var(--text-primary)]",
+      textFrameClassName: "items-stretch justify-stretch"
+    }
+  );
+}
+function resolveIssueManagerReferenceSurfaceState(copy, focusedEntry, previewState) {
+  if (focusedEntry.kind === "folder") {
+    return {
+      entry: focusedEntry,
+      status: "directory"
+    };
+  }
+  if (!("reference" in previewState) || previewState.reference.path !== focusedEntry.path) {
+    return {
+      entry: focusedEntry,
+      message: focusedEntry.path,
+      status: "unsupported"
+    };
+  }
+  switch (previewState.status) {
+    case "loading":
+    case "image":
+    case "text":
+      return {
+        ...previewState,
+        entry: focusedEntry
+      };
+    case "readonly":
+      return {
+        entry: focusedEntry,
+        message: resolveIssueManagerReferencePreviewReadonlyMessage(
+          copy,
+          previewState
+        ),
+        status: "readonly"
+      };
+    case "error":
+      return {
+        entry: focusedEntry,
+        message: copy.t("referencePicker.previewError"),
+        status: "error"
+      };
+    case "unsupported":
+      return {
+        entry: focusedEntry,
+        message: copy.t("referencePicker.previewUnsupported"),
+        status: "unsupported"
+      };
+    case "unavailable":
+      return {
+        entry: focusedEntry,
+        message: copy.t("referencePicker.previewUnavailable"),
+        status: "unsupported"
+      };
+    case "directory":
+      return {
+        entry: focusedEntry,
+        status: "directory"
+      };
+  }
+}
+function resolveIssueManagerReferencePreviewReadonlyMessage(copy, previewState) {
+  switch (previewState.reason) {
+    case "binary":
+      return copy.t("referencePicker.previewBinary");
+    case "decode_failed":
+      return copy.t("referencePicker.previewDecodeFailed");
+    case "file_too_large":
+      return copy.t("referencePicker.previewFileTooLarge", {
+        maxSize: formatWorkspacePreviewByteLimit(previewState.maxSizeBytes ?? 0)
+      });
+    case "text_too_large":
+      return copy.t("referencePicker.previewTextTooLarge", {
+        maxSize: formatWorkspacePreviewByteLimit(previewState.maxSizeBytes ?? 0)
+      });
+  }
+}
 function IssueManagerReferencePickerFooter({
   copy,
   onClose,
@@ -2065,6 +2280,7 @@ function IssueManagerReferencePicker({
     focusedPath,
     isLoading,
     mode,
+    previewState,
     searchQuery,
     selectedRefs,
     visibleEntries,
@@ -2141,7 +2357,8 @@ function IssueManagerReferencePicker({
                 {
                   copy,
                   focusedEntry,
-                  mode
+                  mode,
+                  previewState
                 }
               )
             ] }),
@@ -4509,4 +4726,4 @@ export {
   IssueManagerNode,
   IssueManagerNodeHeader
 };
-//# sourceMappingURL=chunk-K3F67IRA.js.map
+//# sourceMappingURL=chunk-5V4DIEWZ.js.map