@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-KUDGXAF7.js

@@ -0,0 +1,914 @@
+"use client";
+import {
+  useDuplicateSite
+} from "./chunk-T6XI5FLY.js";
+import {
+  artifactExtension,
+  readArtifactView,
+  rememberArtifactView
+} from "./chunk-KV6VVKG5.js";
+import {
+  ARTIFACT_ACCESS_REQUIRED
+} from "./chunk-UCILJJNC.js";
+import {
+  FILE_AUDIENCE_COPY,
+  editableArtifactAudienceCopy,
+  useArtifactAudience
+} from "./chunk-YCVD6CI3.js";
+import {
+  useCopyArtifactLink
+} from "./chunk-JWB44UGJ.js";
+import {
+  ArtifactKindTile,
+  ArtifactTypeIcon
+} from "./chunk-7ZNUHRP5.js";
+import {
+  invalidateArtifactCatalog
+} from "./chunk-KZVRXEYR.js";
+import {
+  artifactKey,
+  artifactKindLabel,
+  artifactKinds,
+  artifactPath,
+  artifactRoute,
+  isEditableArtifactKind
+} from "./chunk-DAD2474Q.js";
+import {
+  siteViewArtifactsReturn
+} from "./chunk-H6474TCK.js";
+import {
+  hasWorkspacePermission
+} from "./chunk-H2ALCTWC.js";
+import {
+  useNavigate,
+  useStringifySearch
+} from "./chunk-BXBDYNRP.js";
+import {
+  toast
+} from "./chunk-O4EA4F3W.js";
+import {
+  useAppContext
+} from "./chunk-JDFDPMKX.js";
+import {
+  Toolbar,
+  ToolbarFilterChips,
+  ToolbarFilterMenu,
+  ToolbarGroup,
+  ToolbarSearch
+} from "./chunk-SOJNW3HC.js";
+import {
+  ListRow,
+  ListRowSkeleton,
+  RowList
+} from "./chunk-54YW6SZZ.js";
+import {
+  cn
+} from "./chunk-A3MTTRCX.js";
+import {
+  SegmentedControl
+} from "./chunk-RGBI63KJ.js";
+import {
+  MetaChip
+} from "./chunk-SS3N75VI.js";
+import {
+  EmptyState,
+  EmptyStateLink
+} from "./chunk-QE4XESS7.js";
+import {
+  StatusBadge
+} from "./chunk-HIPM3BEC.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-GM3LG6BG.js";
+import {
+  apiErrorAdvice,
+  isPermissionDenied,
+  userErrorText
+} from "./chunk-O4OOG3D6.js";
+import {
+  Skeleton
+} from "./chunk-HJO32O7Z.js";
+import {
+  RelativeTime
+} from "./chunk-53AGXXZM.js";
+import {
+  Notice
+} from "./chunk-FSOQDUCG.js";
+import {
+  Button
+} from "./chunk-7QQN3KNP.js";
+
+// src/app/components/artifacts/artifact-library.tsx
+import {
+  CopyIcon,
+  ImageIcon,
+  LayoutGridIcon,
+  LinkIcon,
+  ListIcon,
+  LockIcon,
+  LockKeyholeIcon,
+  MessageSquareIcon,
+  MoreHorizontalIcon,
+  PanelsTopLeftIcon,
+  PinIcon,
+  PinOffIcon,
+  UsersIcon
+} from "lucide-react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var InlineChatImage = lazy(
+  () => import("./app/components/artifacts/inline-chat-image.js").then((module) => ({
+    default: module.InlineChatImage
+  }))
+);
+var ArtifactViewer = lazy(
+  () => import("./app/components/artifacts/artifact-viewer.js").then((module) => ({ default: module.ArtifactViewer }))
+);
+var IMAGE_GLYPH = /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-fg-subtle", "aria-hidden": true });
+function PinnedMarker() {
+  return /* @__PURE__ */ jsxs("span", { title: "Pinned", className: "inline-flex shrink-0 items-center text-fg-muted", children: [
+    /* @__PURE__ */ jsx(PinIcon, { "aria-hidden": true, className: "size-3.5 fill-current" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Pinned" })
+  ] });
+}
+function OnlyMeMarker({ bare = false }) {
+  return /* @__PURE__ */ jsx(MetaChip, { icon: /* @__PURE__ */ jsx(LockIcon, {}), ...bare ? { variant: "text" } : {}, children: "Only me" });
+}
+function onlyMe(item) {
+  return item.visibility === "private";
+}
+function isEditableKind(kind) {
+  return kind === "document" || kind === "spreadsheet" || kind === "presentation";
+}
+function useLibraryFileAudience(workspaceId, item) {
+  const context = useAppContext();
+  const workspace = context.workspaces.find((candidate) => candidate.id === workspaceId) ?? null;
+  const editable = isEditableKind(item.kind);
+  const owned = Boolean(
+    (item.kind === "file" || item.kind === "image" || editable) && item.ownedByViewer && item.visibility && item.status === "active" && hasWorkspacePermission(
+      context.accessContext,
+      workspaceId,
+      editable ? "artifacts:publish" : "files:upload"
+    )
+  );
+  const audience = useArtifactAudience({
+    client: context.client,
+    workspaceId,
+    workspaceName: workspace?.name ?? "this workspace",
+    title: item.title,
+    visibility: item.visibility === "private" ? "private" : "workspace",
+    ownedByCurrentUser: owned,
+    copy: isEditableKind(item.kind) ? editableArtifactAudienceCopy(item.kind) : FILE_AUDIENCE_COPY,
+    canLimitToMe: true,
+    update: async (visibility) => {
+      if (isEditableKind(item.kind))
+        await context.client.updateEditableArtifactVisibility(workspaceId, item.id, {
+          visibility
+        });
+      else await context.client.updateFileVisibility(workspaceId, item.id, { visibility });
+      invalidateArtifactCatalog(context.client, workspaceId);
+    }
+  });
+  const menuItem = !owned ? null : audience.share ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: audience.share, children: [
+    /* @__PURE__ */ jsx(UsersIcon, {}),
+    "Share with workspace\u2026"
+  ] }) : audience.limit ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: audience.limit, children: [
+    /* @__PURE__ */ jsx(LockKeyholeIcon, {}),
+    "Limit to me\u2026"
+  ] }) : null;
+  return { menuItem, dialog: owned ? audience.dialog : null };
+}
+function ArtifactThumbnail({
+  children,
+  placeholder = IMAGE_GLYPH
+}) {
+  const host = useRef(null);
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const element = host.current;
+    if (!element) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px 0px" }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: host, className: "flex h-full w-full items-center justify-center", children: visible ? children : placeholder });
+}
+function ImageTile({ workspaceId, item }) {
+  return (
+    // The image's own pixels; while it loads or when it can't, the image glyph
+    // (the words stay for screen readers, never squeezed into 32px).
+    /* @__PURE__ */ jsxs("span", { className: "relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-[10px] bg-surface-2 [&_[role=status]]:sr-only [&_img]:relative [&_img]:size-full [&_img]:bg-surface-2 [&_img]:object-cover", children: [
+      /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": true, className: "absolute size-4 text-fg-subtle" }),
+      /* @__PURE__ */ jsx(ArtifactThumbnail, { placeholder: null, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ImageIcon, { className: "size-4 text-fg-subtle", "aria-hidden": true }), children: /* @__PURE__ */ jsx(
+        InlineChatImage,
+        {
+          workspaceId,
+          artifactId: item.id,
+          alt: item.title,
+          thumbnail: true
+        }
+      ) }) })
+    ] })
+  );
+}
+var TYPE_GROUP = {
+  id: "type",
+  label: "Type",
+  options: artifactKinds.filter(([kind]) => kind !== "all").map(([kind, label]) => ({ id: kind, label }))
+};
+var STATUS_GROUP = {
+  id: "status",
+  label: "Status",
+  options: [{ id: "archived", label: "Archived" }]
+};
+var SORT_GROUP = {
+  id: "sort",
+  label: "Sort",
+  options: [
+    { id: "newest", label: "Newest first" },
+    { id: "title", label: "Title" }
+  ]
+};
+function filterValueFor(filters, withType) {
+  return {
+    ...withType && filters.kind !== "all" ? { type: [filters.kind] } : {},
+    ...filters.status === "archived" ? { status: ["archived"] } : {},
+    ...filters.sort !== "updated" ? { sort: [filters.sort] } : {}
+  };
+}
+function lastPicked(previous, next, group) {
+  const ids = next[group] ?? [];
+  if (ids.length <= 1) return ids[0];
+  const before = previous[group] ?? [];
+  return ids.filter((id) => !before.includes(id)).at(-1);
+}
+function isPlainClick(event) {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+function opensInViewer(item) {
+  return item.kind === "image" || item.kind === "file";
+}
+function useArtifactOpen({
+  workspaceId,
+  item,
+  sessionId,
+  onSelect,
+  onView,
+  onPin,
+  loading = false,
+  browseSearch
+}) {
+  const navigate = useNavigate();
+  const stringifySearch = useStringifySearch();
+  const audience = useLibraryFileAudience(workspaceId, item);
+  const { accessContext } = useAppContext();
+  const copies = useDuplicateSite(workspaceId);
+  const copyArtifactLink = useCopyArtifactLink(workspaceId);
+  const canDuplicate = item.kind === "site" && Boolean(item.versionId) && hasWorkspacePermission(accessContext, workspaceId, "artifacts:publish");
+  const [pinning, setPinning] = useState(false);
+  const pinInFlight = useRef(false);
+  const togglePin = async () => {
+    if (!onPin || pinInFlight.current || loading) return;
+    pinInFlight.current = true;
+    setPinning(true);
+    const pinned = !item.pinned;
+    try {
+      await onPin(item, pinned);
+      toast(pinned ? "Artifact pinned" : "Artifact unpinned");
+    } catch (error) {
+      toast.error(pinned ? "Couldn't pin artifact" : "Couldn't unpin artifact", {
+        description: userErrorText(error)
+      });
+    } finally {
+      pinInFlight.current = false;
+      setPinning(false);
+    }
+  };
+  const open = () => onSelect ? onSelect(item) : item.kind === "site" ? (
+    // A Site opens in the Site view, with its chat beside it. From the
+    // Artifacts page it carries that page's query, so the Site view's
+    // Back returns to the page as it was.
+    void navigate({
+      to: "/workspaces/$workspaceId/sites/$siteId",
+      params: { workspaceId, siteId: item.id },
+      ...browseSearch ? { search: siteViewArtifactsReturn(browseSearch) } : {}
+    })
+  ) : void navigate({
+    to: artifactRoute(item.kind),
+    params: { workspaceId, artifactId: item.id },
+    search: browseSearch ?? (sessionId ? { fromSession: sessionId } : {})
+  });
+  const menu = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: open, children: [
+      /* @__PURE__ */ jsx(PanelsTopLeftIcon, {}),
+      "Open"
+    ] }),
+    onPin ? /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: pinning || loading, onSelect: () => void togglePin(), children: [
+      item.pinned ? /* @__PURE__ */ jsx(PinOffIcon, {}) : /* @__PURE__ */ jsx(PinIcon, {}),
+      pinning ? "Saving\u2026" : item.pinned ? "Unpin" : "Pin"
+    ] }) : null,
+    audience.menuItem,
+    canDuplicate ? /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        disabled: copies.busy,
+        onSelect: () => void copies.duplicate(item, { open: !onSelect }),
+        children: [
+          /* @__PURE__ */ jsx(CopyIcon, {}),
+          copies.busy ? "Duplicating\u2026" : "Duplicate"
+        ]
+      }
+    ) : null,
+    item.sourceSessionId && item.sourceSessionId !== sessionId ? /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onSelect: () => void navigate({
+          to: "/workspaces/$workspaceId/sessions/$sessionId",
+          params: { workspaceId, sessionId: item.sourceSessionId }
+        }),
+        children: [
+          /* @__PURE__ */ jsx(MessageSquareIcon, {}),
+          "Open source session"
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+    /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => void copyArtifactLink(item), children: [
+      /* @__PURE__ */ jsx(LinkIcon, {}),
+      "Copy link"
+    ] })
+  ] });
+  const activate = onView && opensInViewer(item) ? () => onView(item) : open;
+  return {
+    open: activate,
+    menu,
+    dialog: audience.dialog,
+    // Links keep a real href (new tab, copy); a plain click stays in the router.
+    link: onSelect ? null : {
+      href: browseSearch ? `${artifactPath(workspaceId, item)}${stringifySearch(
+        item.kind === "site" ? siteViewArtifactsReturn(browseSearch) : browseSearch
+      )}` : artifactPath(workspaceId, item, sessionId),
+      onClick: (event) => {
+        if (!isPlainClick(event)) return;
+        event.preventDefault();
+        activate();
+      }
+    }
+  };
+}
+function updatedMeta(item) {
+  return /* @__PURE__ */ jsxs("span", { children: [
+    "updated ",
+    /* @__PURE__ */ jsx(RelativeTime, { date: item.updatedAt, inSentence: true, focusable: false })
+  ] }, "updated");
+}
+var ARTIFACT_COLUMNS = [
+  {
+    id: "updated",
+    label: "Updated",
+    width: 112,
+    align: "end",
+    hideLabel: true
+  }
+];
+function ArtifactRow({
+  workspaceId,
+  item,
+  sessionId,
+  onSelect,
+  onView,
+  onPin,
+  loading,
+  browseSearch
+}) {
+  const { open, menu, link, dialog } = useArtifactOpen({
+    workspaceId,
+    item,
+    sessionId,
+    onSelect,
+    onView,
+    onPin,
+    loading,
+    browseSearch
+  });
+  const archived = item.status === "archived";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ListRow,
+      {
+        leading: item.kind === "image" ? /* @__PURE__ */ jsx(ImageTile, { workspaceId, item }) : /* @__PURE__ */ jsx(ArtifactKindTile, { kind: item.kind }),
+        title: item.title,
+        titleAddon: item.pinned || onlyMe(item) ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+          item.pinned ? /* @__PURE__ */ jsx(PinnedMarker, {}) : null,
+          onlyMe(item) ? /* @__PURE__ */ jsx(OnlyMeMarker, {}) : null
+        ] }) : void 0,
+        meta: [
+          artifactKindLabel[item.kind],
+          item.kind === "file" && item.filename && item.filename !== item.title ? item.filename : null
+        ].filter((part) => Boolean(part)),
+        status: archived ? /* @__PURE__ */ jsx(StatusBadge, { variant: "dot", tone: "neutral", children: "Archived" }) : void 0,
+        cells: { updated: /* @__PURE__ */ jsx(RelativeTime, { date: item.updatedAt }) },
+        ...link ? { href: link.href, onOpen: link.onClick } : { onOpen: open },
+        menu,
+        menuLabel: `More actions for ${item.title}`
+      }
+    ),
+    dialog
+  ] });
+}
+var SITE_STILL_POLICY = "default-src 'none'; img-src data: blob:; media-src data: blob:; font-src data:; style-src 'unsafe-inline'";
+var SITE_STILL_FRAME_POLICY = { csp: SITE_STILL_POLICY };
+function siteStillDocument(html) {
+  return `<!doctype html><meta http-equiv="Content-Security-Policy" content="${SITE_STILL_POLICY}"><meta name="color-scheme" content="light">${html}`;
+}
+var siteHtmlCache = /* @__PURE__ */ new Map();
+var SITE_HTML_CACHE_LIMIT = 48;
+function useSiteHtml(workspaceId, item) {
+  const { client, accessKeyVersion } = useAppContext();
+  const versionId = item.versionId;
+  const [state, setState] = useState(null);
+  const key = `${accessKeyVersion}:${workspaceId}:${item.id}:${versionId}`;
+  useEffect(() => {
+    if (!versionId) return;
+    let active = true;
+    let request = siteHtmlCache.get(key);
+    if (!request) {
+      request = client.getWorkspaceArtifactHtml(workspaceId, item.id, {
+        versionId
+      });
+      siteHtmlCache.set(key, request);
+      if (siteHtmlCache.size > SITE_HTML_CACHE_LIMIT)
+        siteHtmlCache.delete(siteHtmlCache.keys().next().value);
+      request.catch(() => siteHtmlCache.delete(key));
+    }
+    request.then(
+      (html) => active && setState({ key, html }),
+      () => active && setState({ key, html: null })
+    );
+    return () => {
+      active = false;
+    };
+  }, [client, item.id, key, versionId, workspaceId]);
+  return state?.key === key ? state.html : void 0;
+}
+function SiteStill({
+  workspaceId,
+  item,
+  placeholder
+}) {
+  const html = useSiteHtml(workspaceId, item);
+  if (!html) return placeholder;
+  return (
+    // Drawn at three times the card's width and scaled down, like a screenshot;
+    // a touch dimmer in dark so a white page doesn't glare.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute inset-0 overflow-hidden bg-white dark:brightness-[0.88]",
+        inert: true,
+        children: /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            title: `Preview of ${item.title}`,
+            sandbox: "",
+            ...SITE_STILL_FRAME_POLICY,
+            srcDoc: siteStillDocument(html),
+            loading: "lazy",
+            tabIndex: -1,
+            "aria-hidden": true,
+            className: "absolute top-0 left-0 h-[300%] w-[300%] origin-top-left scale-[0.3333] border-0 bg-white"
+          }
+        )
+      }
+    )
+  );
+}
+function PreviewPlaceholder({ item }) {
+  const extension = item.kind === "file" ? artifactExtension(item) : null;
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center gap-2 text-fg-subtle", children: [
+    /* @__PURE__ */ jsx("span", { className: "grid size-10 place-items-center rounded-[10px] border border-border bg-surface text-fg-muted", children: /* @__PURE__ */ jsx(ArtifactTypeIcon, { kind: item.kind, className: "size-5" }) }),
+    extension ? /* @__PURE__ */ jsxs("span", { className: "text-2xs leading-4 font-medium text-fg-subtle", children: [
+      ".",
+      extension
+    ] }) : null
+  ] });
+}
+function ArtifactPreview({
+  workspaceId,
+  item
+}) {
+  const placeholder = /* @__PURE__ */ jsx(PreviewPlaceholder, { item });
+  if (item.kind === "image")
+    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 [&_img]:size-full [&_img]:object-cover", children: /* @__PURE__ */ jsx(ArtifactThumbnail, { placeholder, children: /* @__PURE__ */ jsx(Suspense, { fallback: placeholder, children: /* @__PURE__ */ jsx(
+      InlineChatImage,
+      {
+        workspaceId,
+        artifactId: item.id,
+        alt: item.title,
+        thumbnail: true
+      }
+    ) }) }) });
+  if (item.kind === "site" && item.versionId)
+    return /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(ArtifactThumbnail, { placeholder, children: /* @__PURE__ */ jsx(SiteStill, { workspaceId, item, placeholder }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center", children: placeholder });
+}
+function ArtifactCard({
+  workspaceId,
+  item,
+  sessionId,
+  onSelect,
+  onView,
+  onPin,
+  loading,
+  browseSearch
+}) {
+  const { open, menu, link, dialog } = useArtifactOpen({
+    workspaceId,
+    item,
+    sessionId,
+    onSelect,
+    onView,
+    onPin,
+    loading,
+    browseSearch
+  });
+  const titleId = useId();
+  const archived = item.status === "archived";
+  const actionProps = {
+    "aria-labelledby": titleId,
+    style: { outline: "none" },
+    className: "block min-w-0 truncate text-sm leading-5 font-medium text-fg after:absolute after:inset-0 after:z-0 after:rounded-[14px] after:content-['']"
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "group relative flex min-w-0 flex-col overflow-hidden rounded-[14px] border border-border bg-surface",
+        "transition-colors duration-[120ms] hover:border-border-strong",
+        "has-[[data-card-action]:focus-visible]:outline-2 has-[[data-card-action]:focus-visible]:outline-offset-2 has-[[data-card-action]:focus-visible]:outline-brand/55"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative aspect-[16/10] w-full overflow-hidden border-b border-border bg-surface-2",
+              archived && "opacity-70 grayscale"
+            ),
+            children: /* @__PURE__ */ jsx(ArtifactPreview, { workspaceId, item })
+          }
+        ),
+        archived || item.pinned || onlyMe(item) ? (
+          // On the preview, so the meta line keeps its one fact whole.
+          /* @__PURE__ */ jsxs("span", { className: "absolute top-2.5 left-2.5 flex items-center gap-2 rounded-full bg-surface px-2 py-1", children: [
+            item.pinned ? /* @__PURE__ */ jsx(PinnedMarker, {}) : null,
+            onlyMe(item) ? /* @__PURE__ */ jsx(OnlyMeMarker, { bare: true }) : null,
+            archived ? /* @__PURE__ */ jsx(StatusBadge, { tone: "neutral", icon: "auto", children: "Archived" }) : null
+          ] })
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-2 px-3.5 pt-3 pb-3.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            link ? /* @__PURE__ */ jsx("a", { ...actionProps, "data-card-action": "", href: link.href, onClick: link.onClick, children: /* @__PURE__ */ jsx("span", { id: titleId, children: item.title }) }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                ...actionProps,
+                "data-card-action": "",
+                type: "button",
+                onClick: open,
+                className: cn(actionProps.className, "w-full cursor-pointer text-left"),
+                children: /* @__PURE__ */ jsx("span", { id: titleId, children: item.title })
+              }
+            ),
+            /* @__PURE__ */ jsxs("p", { className: "mt-0.5 truncate text-xs leading-4.5 text-fg-subtle", children: [
+              artifactKindLabel[item.kind],
+              " \xB7 ",
+              updatedMeta(item)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `More actions for ${item.title}`,
+                className: cn(
+                  "relative z-10 -mt-1 -mr-1.5 grid size-8 shrink-0 place-items-center rounded-[10px] text-fg-subtle transition-[color,background-color,opacity] duration-[120ms] hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg pointer-coarse:size-11",
+                  // Quiet until the card is hovered or focused; always there for touch.
+                  "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 pointer-coarse:opacity-100"
+                ),
+                children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true", className: "size-4" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-44", children: menu })
+          ] })
+        ] }),
+        dialog
+      ]
+    }
+  );
+}
+var GALLERY_GRID = "grid min-w-0 grid-cols-1 gap-4 @[560px]:grid-cols-2 @[820px]:grid-cols-3 @[1060px]:grid-cols-4";
+function GallerySkeleton() {
+  return /* @__PURE__ */ jsx("ul", { "aria-hidden": true, className: GALLERY_GRID, children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsxs("li", { className: "overflow-hidden rounded-[14px] border border-border bg-surface", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[16/10] w-full rounded-none" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-3.5 pt-3 pb-3.5", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2" })
+    ] })
+  ] }, index)) });
+}
+var VIEW_OPTIONS = [
+  {
+    value: "gallery",
+    label: "Gallery",
+    icon: /* @__PURE__ */ jsx(LayoutGridIcon, {}),
+    iconOnly: true
+  },
+  { value: "list", label: "List", icon: /* @__PURE__ */ jsx(ListIcon, {}), iconOnly: true }
+];
+function ArtifactLibrary({
+  workspaceId,
+  sessionId,
+  items,
+  filters,
+  onFiltersChange,
+  loading,
+  error,
+  onRetry,
+  nextCursor,
+  onLoadMore,
+  onSelect,
+  onPin,
+  compact = false,
+  emptyAction,
+  onEmptyChange,
+  artifactKindsHidden = false,
+  browseSearch,
+  viewer = false
+}) {
+  const [view, setView] = useState(readArtifactView);
+  const changeView = (next) => {
+    setView(next);
+    rememberArtifactView(next);
+  };
+  const [viewing, setViewing] = useState(null);
+  const showInViewer = (item) => setViewing(artifactKey(item));
+  const closeViewer = useCallback(() => setViewing(null), []);
+  const viewingItem = viewing ? items.find((item) => artifactKey(item) === viewing) : void 0;
+  const groups = compact ? [TYPE_GROUP, STATUS_GROUP, SORT_GROUP] : [STATUS_GROUP, SORT_GROUP];
+  const filterValue = filterValueFor(filters, compact);
+  const setFilterValue = (next) => {
+    const kind = compact ? lastPicked(filterValue, next, "type") : void 0;
+    const status = lastPicked(filterValue, next, "status");
+    const sort = lastPicked(filterValue, next, "sort");
+    onFiltersChange({
+      ...filters,
+      ...compact ? { kind: kind ?? "all" } : {},
+      status: status === "archived" ? "archived" : "active",
+      sort: sort ?? "updated"
+    });
+  };
+  const searching = filters.q.trim().length > 0;
+  const narrowed = searching || filters.kind !== "all" || filters.status !== "active" || filters.sort !== "updated";
+  const nothingAtAll = !loading && !error && items.length === 0 && !narrowed;
+  useEffect(() => onEmptyChange?.(nothingAtAll), [nothingAtAll, onEmptyChange]);
+  const kindLabel = filters.kind === "all" ? "artifacts" : (artifactKinds.find(([kind]) => kind === filters.kind)?.[1] ?? "").toLocaleLowerCase();
+  const readsArtifactKinds = (kind) => kind === "site" || isEditableArtifactKind(kind);
+  const hiddenKindSelected = artifactKindsHidden && filters.kind !== "all" && readsArtifactKinds(filters.kind) && !loading && items.length === 0;
+  const hiddenKindsNotice = artifactKindsHidden && filters.kind === "all" && !(error && isPermissionDenied(error)) && !items.some((item) => readsArtifactKinds(item.kind));
+  let body;
+  if (hiddenKindSelected) {
+    body = /* @__PURE__ */ jsx(Notice, { title: `You can't see ${kindLabel} here.`, children: ARTIFACT_ACCESS_REQUIRED });
+  } else if (error && items.length === 0 && isPermissionDenied(error)) {
+    body = /* @__PURE__ */ jsx(Notice, { title: "You can't see artifacts here.", children: "Ask a workspace admin for access." });
+  } else if (error && items.length === 0) {
+    body = /* @__PURE__ */ jsx(
+      Notice,
+      {
+        tone: "failed",
+        title: "Couldn't load artifacts",
+        action: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: onRetry, children: "Try again" }),
+        actionLayout: "responsive",
+        children: apiErrorAdvice(error)
+      }
+    );
+  } else if (loading && items.length === 0) {
+    body = /* @__PURE__ */ jsx("div", { role: "status", "aria-label": "Loading artifacts", children: view === "gallery" ? /* @__PURE__ */ jsx(GallerySkeleton, {}) : /* @__PURE__ */ jsx(RowList, { label: "Artifacts", columns: ARTIFACT_COLUMNS, flush: !compact, busy: true, children: /* @__PURE__ */ jsx(ListRowSkeleton, { count: 4 }) }) });
+  } else if (nothingAtAll) {
+    body = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: compact ? "inline" : "page",
+        icon: /* @__PURE__ */ jsx(PanelsTopLeftIcon, {}),
+        title: "No artifacts yet",
+        description: "Sites, images, documents, spreadsheets and presentations Opengeni makes show up here.",
+        action: emptyAction
+      }
+    );
+  } else if (items.length === 0) {
+    body = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "inline",
+        title: searching ? `No ${kindLabel} match "${filters.q.trim()}".` : filters.status === "archived" ? `No archived ${kindLabel}. Archived Sites keep their versions and can be restored.` : `No ${kindLabel} yet.`,
+        action: searching || filters.status !== "active" || compact && filters.kind !== "all" ? /* @__PURE__ */ jsx(
+          EmptyStateLink,
+          {
+            onClick: () => onFiltersChange(
+              searching ? { ...filters, q: "" } : {
+                ...filters,
+                q: "",
+                status: "active",
+                ...compact ? { kind: "all" } : {}
+              }
+            ),
+            children: searching ? "Clear search" : "Clear filters"
+          }
+        ) : void 0
+      }
+    );
+  } else {
+    body = /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [
+      view === "gallery" ? /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "aria-label": searching ? "Search results" : "Artifacts",
+          "aria-busy": loading || void 0,
+          className: GALLERY_GRID,
+          children: items.map((item) => /* @__PURE__ */ jsx(
+            ArtifactCard,
+            {
+              workspaceId,
+              item,
+              sessionId,
+              onSelect,
+              onView: viewer ? showInViewer : void 0,
+              onPin,
+              loading,
+              browseSearch
+            },
+            artifactKey(item)
+          ))
+        }
+      ) : /* @__PURE__ */ jsx(
+        RowList,
+        {
+          label: searching ? "Search results" : "Artifacts",
+          columns: ARTIFACT_COLUMNS,
+          flush: !compact,
+          busy: loading,
+          children: items.map((item) => /* @__PURE__ */ jsx(
+            ArtifactRow,
+            {
+              workspaceId,
+              item,
+              sessionId,
+              onSelect,
+              onView: viewer ? showInViewer : void 0,
+              onPin,
+              loading,
+              browseSearch
+            },
+            artifactKey(item)
+          ))
+        }
+      ),
+      error ? /* @__PURE__ */ jsxs("p", { role: "alert", className: "text-sm text-danger", children: [
+        "Couldn't load the latest artifacts. ",
+        userErrorText(error)
+      ] }) : null,
+      nextCursor && onLoadMore ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          className: "self-start pointer-coarse:h-11",
+          disabled: loading,
+          onClick: onLoadMore,
+          children: loading ? "Loading\u2026" : "Load more"
+        }
+      ) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "@container flex min-w-0 flex-col gap-4",
+      "aria-label": sessionId ? "Session artifact library" : "Artifact library",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: nothingAtAll ? "hidden" : "flex min-w-0 flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs(Toolbar, { children: [
+            /* @__PURE__ */ jsx(
+              ToolbarSearch,
+              {
+                value: filters.q,
+                onValueChange: (q) => onFiltersChange({ ...filters, q }),
+                placeholder: "Search artifacts",
+                "aria-label": "Search artifacts by title",
+                maxLength: 200
+              }
+            ),
+            /* @__PURE__ */ jsxs(ToolbarGroup, { align: "end", children: [
+              /* @__PURE__ */ jsx(ToolbarFilterMenu, { groups, value: filterValue, onValueChange: setFilterValue }),
+              /* @__PURE__ */ jsx(
+                SegmentedControl,
+                {
+                  "aria-label": "Show",
+                  options: VIEW_OPTIONS,
+                  value: view,
+                  onValueChange: changeView
+                }
+              )
+            ] })
+          ] }),
+          Object.keys(filterValue).length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: /* @__PURE__ */ jsx(
+            ToolbarFilterChips,
+            {
+              groups,
+              value: filterValue,
+              onValueChange: setFilterValue
+            }
+          ) }) : null
+        ] }),
+        hiddenKindsNotice ? /* @__PURE__ */ jsx(Notice, { title: "Sites and documents are hidden", children: ARTIFACT_ACCESS_REQUIRED }) : null,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: body }),
+        viewing ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          ArtifactViewer,
+          {
+            workspaceId,
+            items,
+            currentKey: viewing,
+            onCurrentKeyChange: setViewing,
+            onClose: closeViewer,
+            actions: viewingItem ? /* @__PURE__ */ jsx(
+              ArtifactViewerMenu,
+              {
+                workspaceId,
+                item: viewingItem,
+                sessionId,
+                onSelect,
+                onPin,
+                loading,
+                browseSearch
+              },
+              viewing
+            ) : null
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function ArtifactViewerMenu(props) {
+  const { menu, dialog } = useArtifactOpen(props);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          className: "pointer-coarse:size-11",
+          "aria-label": `More actions for ${props.item.title}`,
+          children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { "aria-hidden": "true" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-44", children: menu })
+    ] }),
+    dialog
+  ] });
+}
+
+export {
+  ArtifactThumbnail,
+  ArtifactRow,
+  siteStillDocument,
+  ArtifactCard,
+  ArtifactLibrary
+};
+//# sourceMappingURL=chunk-KUDGXAF7.js.map