@geekapps/silo-elements-nextjs 0.0.9 → 0.1.0

package/dist/index.d.ts

@@ -86,4 +86,26 @@ interface FileIconProps {
 }
 declare function FileIcon({ mimeType, name, size, iconSize, showName, showSize, className, style, }: FileIconProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, type AvatarProps, Background, type BackgroundProps, FileIcon, type FileIconProps, Thumbnail, type ThumbnailProps };
+interface FileCardProps {
+    fileId: string;
+    /** Poll for status updates while processing (ms, default: 3000) */
+    pollInterval?: number;
+    /** Show action buttons */
+    actions?: Array<"preview" | "copy-url" | "download" | "delete">;
+    onPreview?: (fileId: string) => void;
+    onCopyUrl?: (url: string) => void;
+    onDelete?: (fileId: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function FileCard({ fileId, pollInterval, actions, onPreview, onCopyUrl, onDelete, className, style, }: FileCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface FilePreviewProps {
+    fileId: string | null;
+    onClose: () => void;
+    /** Poll interval while processing (ms, default: 3000) */
+    pollInterval?: number;
+}
+declare function FilePreview({ fileId, onClose, pollInterval }: FilePreviewProps): react_jsx_runtime.JSX.Element | null;
+
+export { Avatar, type AvatarProps, Background, type BackgroundProps, FileCard, type FileCardProps, FileIcon, type FileIconProps, FilePreview, type FilePreviewProps, Thumbnail, type ThumbnailProps };

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { useMultipartUpload, useBatchUpload, useSignedUrl } from '@geekapps/silo-nextjs';
+import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from '@geekapps/silo-nextjs';
 export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import gsap from 'gsap';
@@ -1873,7 +1873,366 @@ function FileIcon({
     }
   );
 }
+var STATUS_LABEL = {
+  CREATED: "Created",
+  UPLOADING: "Uploading",
+  INGESTING: "Ingesting",
+  QUEUED: "Queued",
+  PROCESSING: "Processing",
+  SYNCING: "Syncing",
+  READY: "Ready",
+  FAILED: "Failed",
+  CANCELLED: "Cancelled"
+};
+var STATUS_COLOR = {
+  READY: "var(--silo-success, #22c55e)",
+  FAILED: "var(--silo-error, #ef4444)",
+  CANCELLED: "var(--silo-error, #ef4444)"
+};
+function statusColor(status) {
+  return STATUS_COLOR[status] ?? "var(--silo-accent, #6366f1)";
+}
+function isProcessing(status) {
+  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
+}
+function FileCard({
+  fileId,
+  pollInterval = 3e3,
+  actions = ["preview", "copy-url"],
+  onPreview,
+  onCopyUrl,
+  onDelete,
+  className = "",
+  style
+}) {
+  const { file, loading } = useFileStatus(fileId, { pollInterval });
+  const card = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0,
+    borderRadius: "var(--silo-radius, 12px)",
+    border: "1px solid var(--silo-border, #e2e8f0)",
+    background: "var(--silo-bg, #f8fafc)",
+    overflow: "hidden",
+    fontFamily: "var(--silo-font, inherit)",
+    width: 220,
+    ...style
+  };
+  if (loading && !file) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...card, padding: 16, color: "var(--silo-text-muted, #94a3b8)", fontSize: 13 }, children: "Loading..." });
+  }
+  if (!file) return null;
+  const status = file.status;
+  const isImg = file.mimeType.startsWith("image/");
+  const isVid = file.mimeType.startsWith("video/");
+  const showThumb = isImg || isVid;
+  const progress = file.progress ?? null;
+  const ext = file.originalName.split(".").pop()?.toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className, style: card, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: 130, background: "var(--silo-bg-hover, #f1f5f9)", flexShrink: 0 }, children: [
+      showThumb ? /* @__PURE__ */ jsx(
+        Thumbnail,
+        {
+          fileKey: file.key,
+          mimeType: file.mimeType,
+          width: "100%",
+          height: 130,
+          borderRadius: "0",
+          style: { display: "block" }
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: "0.05em",
+            padding: "2px 7px",
+            borderRadius: 99,
+            background: "rgba(0,0,0,0.55)",
+            color: statusColor(status),
+            backdropFilter: "blur(4px)"
+          },
+          children: STATUS_LABEL[status] ?? status
+        }
+      ),
+      ext && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: 8,
+            left: 8,
+            fontSize: 9,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            padding: "2px 6px",
+            borderRadius: 6,
+            background: "rgba(0,0,0,0.45)",
+            color: "#fff",
+            backdropFilter: "blur(4px)"
+          },
+          children: ext
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--silo-text, #0f172a)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          title: file.originalName,
+          children: file.originalName
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: [
+        formatBytes(file.size),
+        file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
+        file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
+      ] }),
+      isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
+        /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "var(--silo-text-muted, #94a3b8)", marginTop: 2, display: "block" }, children: [
+          STATUS_LABEL[status],
+          progress != null ? ` \xB7 ${progress}%` : ""
+        ] })
+      ] }),
+      actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }, children: [
+        actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { onClick: () => onPreview(fileId), style: btnStyle, children: "Preview" }),
+        actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const url = `${file.key}`;
+              navigator.clipboard.writeText(url).catch(() => void 0);
+              onCopyUrl(url);
+            },
+            style: btnStyle,
+            children: "Copy URL"
+          }
+        ),
+        actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { onClick: () => onDelete(fileId), style: { ...btnStyle, color: "var(--silo-error, #ef4444)" }, children: "Delete" })
+      ] })
+    ] })
+  ] });
+}
+var btnStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  padding: "3px 9px",
+  borderRadius: 6,
+  border: "1px solid var(--silo-border, #e2e8f0)",
+  background: "transparent",
+  color: "var(--silo-text, #0f172a)",
+  cursor: "pointer",
+  lineHeight: 1.6
+};
+var STATUS_LABEL2 = {
+  CREATED: "Created",
+  UPLOADING: "Uploading",
+  INGESTING: "Ingesting",
+  QUEUED: "Queued",
+  PROCESSING: "Processing",
+  SYNCING: "Syncing",
+  READY: "Ready",
+  FAILED: "Failed",
+  CANCELLED: "Cancelled"
+};
+function isProcessing2(status) {
+  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
+}
+function formatDate(iso) {
+  return new Date(iso).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+}
+function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
+  const { file, loading } = useFileStatus(fileId ?? void 0, {
+    ...fileId ? { pollInterval } : {}
+  });
+  const status = file?.status ?? "";
+  const { url } = useSignedUrl(file?.key ?? null);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+  if (!fileId) return null;
+  const isImg = file?.mimeType.startsWith("image/");
+  const isVid = file?.mimeType.startsWith("video/");
+  const progress = file?.progress ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: onClose,
+        "aria-hidden": true,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e3,
+          background: "rgba(0,0,0,0.6)",
+          backdropFilter: "blur(6px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": file?.originalName ?? "File preview",
+        style: modal,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid var(--silo-border, #e2e8f0)" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 14, fontWeight: 600, color: "var(--silo-text, #0f172a)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: file?.originalName ?? "Loading..." }),
+            /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", style: closeBtn, children: "\u2715" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#0f0f0f", minHeight: 240, position: "relative" }, children: [
+            loading && !file && /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: 13 }, children: "Loading..." }),
+            file && isImg && url && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: url,
+                alt: file.originalName,
+                style: { maxWidth: "100%", maxHeight: 420, objectFit: "contain", display: "block" }
+              }
+            ),
+            file && isVid && url && /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: url,
+                controls: true,
+                style: { maxWidth: "100%", maxHeight: 420, display: "block" }
+              }
+            ),
+            file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
+              /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: 13 }, children: "No preview available" })
+            ] }),
+            file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 12,
+              background: "rgba(0,0,0,0.65)"
+            }, children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
+              /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
+              progress != null && /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8", fontSize: 12 }, children: [
+                progress,
+                "%"
+              ] })
+            ] })
+          ] }),
+          file && /* @__PURE__ */ jsxs("div", { style: { padding: "14px 20px", borderTop: "1px solid var(--silo-border, #e2e8f0)", display: "flex", flexDirection: "column", gap: 8 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: metaGrid, children: [
+              /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucket }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Status", value: STATUS_LABEL2[status] ?? status, highlight: status === "READY" }),
+              file.metadata?.width && /* @__PURE__ */ jsx(MetaRow, { label: "Dimensions", value: `${file.metadata.width}\xD7${file.metadata.height}` }),
+              file.metadata?.duration && /* @__PURE__ */ jsx(MetaRow, { label: "Duration", value: `${Math.round(file.metadata.duration)}s` }),
+              file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }, children: [
+              file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
+              file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
+              file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
+            ] }),
+            url && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
+                style: { ...btnStyle2, marginTop: 4, width: "100%", textAlign: "center" },
+                children: "Copy URL"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function MetaRow({ label, value, highlight }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)", fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: highlight ? "var(--silo-success, #22c55e)" : "var(--silo-text, #0f172a)", fontWeight: highlight ? 600 : 400 }, children: value })
+  ] });
+}
+function Badge({ children, muted }) {
+  return /* @__PURE__ */ jsx("span", { style: {
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: "0.05em",
+    padding: "2px 7px",
+    borderRadius: 99,
+    border: "1px solid var(--silo-border, #e2e8f0)",
+    color: muted ? "var(--silo-text-muted, #94a3b8)" : "var(--silo-accent, #6366f1)",
+    background: "transparent"
+  }, children });
+}
+var modal = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  zIndex: 1001,
+  width: "min(92vw, 560px)",
+  maxHeight: "90vh",
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: "var(--silo-radius, 16px)",
+  background: "var(--silo-bg, #fff)",
+  boxShadow: "0 24px 80px rgba(0,0,0,0.35)",
+  overflow: "hidden",
+  fontFamily: "var(--silo-font, inherit)"
+};
+var closeBtn = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  fontSize: 16,
+  color: "var(--silo-text-muted, #94a3b8)",
+  lineHeight: 1,
+  padding: "2px 4px",
+  flexShrink: 0
+};
+var btnStyle2 = {
+  fontSize: 12,
+  fontWeight: 600,
+  padding: "7px 14px",
+  borderRadius: 8,
+  border: "1px solid var(--silo-border, #e2e8f0)",
+  background: "transparent",
+  color: "var(--silo-text, #0f172a)",
+  cursor: "pointer"
+};
+var metaGrid = {
+  display: "grid",
+  gridTemplateColumns: "auto 1fr",
+  gap: "5px 16px",
+  alignItems: "baseline"
+};
 
-export { Avatar, Background, DropZone, FileIcon, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
+export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map