@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/dist/esm/modules/appCatalog/routeLoader.d.ts

@@ -0,0 +1,3 @@
+export interface AppCatalogLoaderReturn {
+}
+export declare function appCatalogRouteLoader(): Promise<AppCatalogLoaderReturn>;

package/dist/esm/modules/appCatalog/routeLoader.js

@@ -0,0 +1,7 @@
+async function appCatalogRouteLoader() {
+  return {};
+}
+export {
+  appCatalogRouteLoader
+};
+//# sourceMappingURL=routeLoader.js.map

package/dist/esm/modules/appCatalog/routeLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routeLoader.js","sources":["../../../../src/modules/appCatalog/routeLoader.ts"],"sourcesContent":["export interface AppCatalogLoaderReturn {\n  // App catalog doesn't need pre-loading, just return empty object\n}\n\nexport async function appCatalogRouteLoader(): Promise<AppCatalogLoaderReturn> {\n  // Catalog mode doesn't require pre-loading data like hopper mode\n  // The AppCatalogLayout handles fetching and caching\n  return {}\n}\n"],"names":[],"mappings":"AAIA,eAAsB,wBAAyD;AAG7E,SAAO,CAAA;AACT;"}

package/dist/esm/modules/appCatalog/ui/components/AppDetailModal.d.ts

@@ -0,0 +1,7 @@
+import { AppForCatalog } from '@env-hopper/backend-core';
+export interface AppDetailModalProps {
+    app: AppForCatalog;
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/appCatalog/ui/components/ApproverDisplay.d.ts

@@ -0,0 +1,30 @@
+import { AppRole } from '@env-hopper/backend-core';
+type ApproverBase = {
+    comment?: string;
+    roles?: Array<AppRole>;
+    approvalPolicy?: string;
+    postApprovalInstructions?: string;
+    seeMoreUrls?: Array<string>;
+};
+type BotApprover = ApproverBase & {
+    type: 'bot';
+    url?: string;
+    prompt?: string;
+};
+type TicketApprover = ApproverBase & {
+    type: 'ticket';
+    url?: string;
+    requestFormTemplate?: string;
+};
+type PersonApprover = ApproverBase & {
+    type: 'person';
+    email?: string;
+    url?: string;
+    description?: string;
+};
+type Approver = BotApprover | TicketApprover | PersonApprover;
+interface ApproverDisplayProps {
+    approver: Approver;
+}
+export declare function ApproverDisplay({ approver }: ApproverDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/modules/appCatalog/ui/components/GroupingColumn.d.ts

@@ -0,0 +1,11 @@
+export interface GroupingColumnProps {
+    className?: string;
+}
+export interface FilterItem {
+    displayName: string;
+    tag: string;
+}
+export declare function GroupingColumn(props: GroupingColumnProps): import("react/jsx-runtime").JSX.Element;
+export interface MiniCardProps {
+    children?: React.ReactNode;
+}

package/dist/esm/modules/appCatalog/ui/components/GroupingTabs.d.ts

@@ -0,0 +1,7 @@
+export interface GroupingTabsProps {
+    className?: string;
+}
+export declare function GroupingTabs(props: GroupingTabsProps): import("react/jsx-runtime").JSX.Element;
+export interface MiniCardProps {
+    children?: React.ReactNode;
+}

package/dist/esm/modules/appCatalog/ui/components/ScreenshotGallery.d.ts

@@ -0,0 +1,10 @@
+import { AppForCatalog } from '@env-hopper/backend-core';
+export interface ScreenshotGalleryProps {
+    app: AppForCatalog;
+    screenshotIds: Array<string>;
+    initialIndex?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title?: string;
+}
+export declare function ScreenshotGallery({ app, screenshotIds, initialIndex, open, onOpenChange, title, }: ScreenshotGalleryProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/appCatalog/ui/components/ScreenshotGallery.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Gallery } from "../../../gallery/Gallery.js";
+import { Dialog, DialogContent } from "../../../../ui/dialog.js";
+function ScreenshotGallery({
+  app,
+  screenshotIds,
+  initialIndex = 0,
+  open,
+  onOpenChange,
+  title
+}) {
+  const baseUrl = "/";
+  const images = useMemo(
+    () => screenshotIds.map((id) => ({
+      url: `${baseUrl}/api/screenshots/${id}`,
+      alt: `${app.displayName} screenshot`
+    })),
+    [screenshotIds, app.displayName, baseUrl]
+  );
+  if (screenshotIds.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(
+    DialogContent,
+    {
+      className: "h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden",
+      showCloseButton: true,
+      children: /* @__PURE__ */ jsx(Gallery, { images, initialIndex, title })
+    }
+  ) });
+}
+export {
+  ScreenshotGallery
+};
+//# sourceMappingURL=ScreenshotGallery.js.map

package/dist/esm/modules/appCatalog/ui/components/ScreenshotGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenshotGallery.js","sources":["../../../../../../src/modules/appCatalog/ui/components/ScreenshotGallery.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nimport type { AppForCatalog } from '@env-hopper/backend-core'\n\nimport { Gallery } from '~/modules/gallery/Gallery'\nimport type { GalleryImage } from '~/modules/gallery/Gallery'\nimport { Dialog, DialogContent } from '~/ui/dialog'\n\nexport interface ScreenshotGalleryProps {\n  app: AppForCatalog\n  screenshotIds: Array<string>\n  initialIndex?: number\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title?: string\n}\n\nexport function ScreenshotGallery({\n  app,\n  screenshotIds,\n  initialIndex = 0,\n  open,\n  onOpenChange,\n  title,\n}: ScreenshotGalleryProps) {\n  // Transform screenshot IDs to full URLs\n  const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'\n\n  const images: Array<GalleryImage> = useMemo(\n    () =>\n      screenshotIds.map((id) => ({\n        url: `${baseUrl}/api/screenshots/${id}`,\n        alt: `${app.displayName} screenshot`,\n      })),\n    [screenshotIds, app.displayName, baseUrl],\n  )\n\n  // Don't render if no screenshots\n  if (screenshotIds.length === 0) {\n    return null\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        className=\"h-[85vh] w-full max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] md:max-w-[calc(100vw-4rem)] p-0 overflow-hidden\"\n        showCloseButton={true}\n      >\n        <Gallery images={images} initialIndex={initialIndex} title={title} />\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AAEzB,QAAM,UAAU;AAEhB,QAAM,SAA8B;AAAA,IAClC,MACE,cAAc,IAAI,CAAC,QAAQ;AAAA,MACzB,KAAK,GAAG,OAAO,oBAAoB,EAAE;AAAA,MACrC,KAAK,GAAG,IAAI,WAAW;AAAA,IAAA,EACvB;AAAA,IACJ,CAAC,eAAe,IAAI,aAAa,OAAO;AAAA,EAAA;AAI1C,MAAI,cAAc,WAAW,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,QAAA,EAAO,MAAY,cAClB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,iBAAiB;AAAA,MAEjB,UAAA,oBAAC,SAAA,EAAQ,QAAgB,cAA4B,OAAc;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogFiltersCard.d.ts

@@ -0,0 +1,9 @@
+export type AppCatalogScopeFilter = 'apps' | 'appsAndPages';
+export type AppCatalogDisplayMode = 'card' | 'grid';
+export interface AppCatalogFiltersCardProps {
+    scopeFilter: AppCatalogScopeFilter;
+    onScopeFilterChange: (value: AppCatalogScopeFilter) => void;
+    displayMode: AppCatalogDisplayMode;
+    onDisplayModeChange: (value: AppCatalogDisplayMode) => void;
+}
+export declare function AppCatalogFiltersCard({ scopeFilter, onScopeFilterChange, displayMode, onDisplayModeChange, }: AppCatalogFiltersCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogGrid.d.ts

@@ -0,0 +1,9 @@
+import { AppForCatalog, GroupingTagDefinition } from '@env-hopper/backend-core';
+export interface AppCatalogGridProps {
+    apps: Array<AppForCatalog>;
+    selectedAppSlug?: string;
+    groupingDefinition?: GroupingTagDefinition;
+    onAppClick?: (app: AppForCatalog) => void;
+    onCloseDetails?: () => void;
+}
+export declare function AppCatalogGrid({ apps, selectedAppSlug, groupingDefinition, onAppClick, onCloseDetails, }: AppCatalogGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogGrid.js

@@ -0,0 +1,282 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { X, AppWindow, ExternalLink } from "lucide-react";
+import React__default from "react";
+import { cn } from "../../../../lib/utils.js";
+import { Badge } from "../../../../ui/badge.js";
+import { Button } from "../../../../ui/button.js";
+import { ScreenshotGallery } from "../components/ScreenshotGallery.js";
+function getIconUrl(iconName) {
+  const baseUrl = "/";
+  return `${baseUrl}/api/icons/${iconName}`;
+}
+function AppIcon({
+  app,
+  className
+}) {
+  const [imageError, setImageError] = React__default.useState(false);
+  if (app.iconName && !imageError) {
+    return /* @__PURE__ */ jsx("div", { className: cn("size-12 shrink-0", className), children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: getIconUrl(app.iconName),
+        alt: `${app.displayName} icon`,
+        className: "size-12 rounded-lg object-contain",
+        onError: () => setImageError(true)
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center rounded-lg bg-primary/10 text-primary size-12 shrink-0",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(AppWindow, { className: "size-6" })
+    }
+  );
+}
+function AppScreenshot({ app }) {
+  var _a;
+  const [imageError, setImageError] = React__default.useState(false);
+  const [isLoadingImage, setIsLoadingImage] = React__default.useState(true);
+  const screenshotId = (_a = app.screenshotIds) == null ? void 0 : _a[0];
+  if (!screenshotId) {
+    return /* @__PURE__ */ jsx("div", { className: "w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64", children: /* @__PURE__ */ jsx("div", { className: "w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm", children: "No screenshot available" }) });
+  }
+  const screenshotImageUrl = `${"/"}/api/screenshots/${screenshotId}?size=512`;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64", children: [
+    !imageError ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: screenshotImageUrl,
+        alt: `${app.displayName} screenshot`,
+        className: "w-full h-64 object-contain",
+        onError: () => {
+          setImageError(true);
+          setIsLoadingImage(false);
+        },
+        onLoad: () => setIsLoadingImage(false)
+      }
+    ) : null,
+    (imageError || isLoadingImage) && /* @__PURE__ */ jsx("div", { className: "w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm", children: isLoadingImage ? "Loading screenshot..." : "No screenshot available" })
+  ] });
+}
+function AppDetails({ app }) {
+  const [isGalleryOpen, setIsGalleryOpen] = React__default.useState(false);
+  const [galleryInitialIndex, setGalleryInitialIndex] = React__default.useState(0);
+  const handleScreenshotClick = (index) => {
+    setGalleryInitialIndex(index);
+    setIsGalleryOpen(true);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-y-auto p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b pb-6", children: [
+        /* @__PURE__ */ jsx(AppIcon, { app, className: "size-16" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: app.displayName }),
+          app.appUrl && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: app.appUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "mt-1 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-primary",
+              children: [
+                app.appUrl.replaceAll(/https?:\/\//g, ""),
+                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+              ]
+            }
+          )
+        ] })
+      ] }),
+      app.description && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Description" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: app.description })
+      ] }),
+      app.tags && app.tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Tags" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: app.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
+      ] }),
+      app.teams && app.teams.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Teams" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: app.teams.map((team) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: team }, team)) })
+      ] }),
+      app.screenshotIds && app.screenshotIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "mb-2 text-sm font-medium", children: [
+          "Screenshots (",
+          app.screenshotIds.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "cursor-pointer hover:opacity-80 transition-opacity",
+            onClick: () => handleScreenshotClick(0),
+            children: [
+              /* @__PURE__ */ jsx(AppScreenshot, { app }),
+              app.screenshotIds.length > 1 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground mt-2 text-center", children: [
+                "Click to view all ",
+                app.screenshotIds.length,
+                " screenshots"
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ScreenshotGallery,
+      {
+        app,
+        screenshotIds: app.screenshotIds || [],
+        open: isGalleryOpen,
+        onOpenChange: setIsGalleryOpen,
+        initialIndex: galleryInitialIndex,
+        title: `${app.displayName} - Screenshots`
+      }
+    )
+  ] });
+}
+function groupApps(apps, groupingDef) {
+  var _a;
+  if (!groupingDef) {
+    const sortedApps = [...apps].sort(
+      (a, b) => a.displayName.localeCompare(b.displayName)
+    );
+    return [{ groupName: "All Apps", apps: sortedApps }];
+  }
+  const grouped = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const app of apps) {
+    const matchingTag = (_a = app.tags) == null ? void 0 : _a.find(
+      (tag) => tag.startsWith(`${groupingDef.prefix}:`)
+    );
+    if (matchingTag) {
+      const value = matchingTag.split(":")[1];
+      if (value) {
+        const tagValue = groupingDef.values.find((v) => v.value === value);
+        const displayName = (tagValue == null ? void 0 : tagValue.displayName) || value;
+        if (!grouped.has(displayName)) {
+          grouped.set(displayName, []);
+        }
+        grouped.get(displayName).push(app);
+      } else {
+        ungrouped.push(app);
+      }
+    } else {
+      ungrouped.push(app);
+    }
+  }
+  const result = [];
+  for (const [groupName, appsInGroup] of grouped) {
+    const sortedGroupApps = appsInGroup.sort(
+      (a, b) => a.displayName.localeCompare(b.displayName)
+    );
+    result.push({ groupName, apps: sortedGroupApps });
+  }
+  if (ungrouped.length > 0) {
+    const sortedUngrouped = ungrouped.sort(
+      (a, b) => a.displayName.localeCompare(b.displayName)
+    );
+    result.push({ groupName: "Other", apps: sortedUngrouped });
+  }
+  return result;
+}
+function AppCatalogGrid({
+  apps,
+  selectedAppSlug,
+  groupingDefinition,
+  onAppClick,
+  onCloseDetails
+}) {
+  const tableRef = React__default.useRef(null);
+  const rowRefs = React__default.useRef(/* @__PURE__ */ new Map());
+  const lastClickedRef = React__default.useRef(null);
+  const selectedApp = selectedAppSlug ? apps.find((a) => a.slug === selectedAppSlug) : null;
+  const groupedApps = groupApps(apps, groupingDefinition);
+  React__default.useEffect(() => {
+    if (selectedAppSlug && selectedAppSlug !== lastClickedRef.current) {
+      const rowElement = rowRefs.current.get(selectedAppSlug);
+      if (rowElement) {
+        rowElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }
+  }, [selectedAppSlug]);
+  const handleAppClick = (app) => {
+    lastClickedRef.current = app.slug;
+    onAppClick == null ? void 0 : onAppClick(app);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid gap-4 w-full",
+        selectedApp ? "grid-cols-[1fr_400px]" : "grid-cols-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed", ref: tableRef, children: [
+          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 border-b bg-background z-10", children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium text-sm", children: "Application" }),
+            /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left font-medium text-sm", children: "Description" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: groupedApps.map((group) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+            /* @__PURE__ */ jsx("tr", { className: "bg-muted/50", children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                colSpan: 2,
+                className: "px-4 py-6 sticky top-[49px] bg-muted/90 backdrop-blur z-10",
+                children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "font-bold text-lg tracking-widest uppercase leading-loose text-muted-foreground", children: group.groupName }) })
+              }
+            ) }),
+            group.apps.map((app) => /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                ref: (el) => {
+                  if (el && app.slug) {
+                    rowRefs.current.set(app.slug, el);
+                  } else if (app.slug) {
+                    rowRefs.current.delete(app.slug);
+                  }
+                },
+                onClick: () => handleAppClick(app),
+                className: cn(
+                  "border-b cursor-pointer transition-colors",
+                  (selectedApp == null ? void 0 : selectedApp.id) === app.id ? "bg-blue-100 dark:bg-blue-950 hover:bg-blue-200 dark:hover:bg-blue-900" : "hover:bg-muted/30"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(AppIcon, { app, className: "size-6" }),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: app.displayName || "Unnamed App" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground line-clamp-2", children: app.description || "—" }) })
+                ]
+              },
+              app.id
+            ))
+          ] }, group.groupName)) })
+        ] }) }),
+        selectedApp && /* @__PURE__ */ jsx("div", { className: "sticky top-0 max-h-screen overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto border-l bg-background relative", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "absolute top-4 right-4 z-20 size-8 rounded-full bg-background/80 backdrop-blur hover:bg-background",
+              onClick: onCloseDetails,
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(AppDetails, { app: selectedApp })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  AppCatalogGrid
+};
+//# sourceMappingURL=AppCatalogGrid.js.map

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppCatalogGrid.js","sources":["../../../../../../src/modules/appCatalog/ui/grid/AppCatalogGrid.tsx"],"sourcesContent":["import { AppWindow, ExternalLink, X } from 'lucide-react'\nimport React from 'react'\n\nimport type {\n  AppForCatalog,\n  GroupingTagDefinition,\n} from '@env-hopper/backend-core'\n\nimport { cn } from '~/lib/utils'\nimport { Badge } from '~/ui/badge'\nimport { Button } from '~/ui/button'\nimport { ScreenshotGallery } from '../components/ScreenshotGallery'\n\nexport interface AppCatalogGridProps {\n  apps: Array<AppForCatalog>\n  selectedAppSlug?: string\n  groupingDefinition?: GroupingTagDefinition\n  onAppClick?: (app: AppForCatalog) => void\n  onCloseDetails?: () => void\n}\n\nfunction getIconUrl(iconName: string): string {\n  const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'\n  return `${baseUrl}/api/icons/${iconName}`\n}\n\nfunction AppIcon({\n  app,\n  className,\n}: {\n  app: AppForCatalog\n  className?: string\n}) {\n  const [imageError, setImageError] = React.useState(false)\n\n  // Use iconName from backend if available\n  if (app.iconName && !imageError) {\n    return (\n      <div className={cn('size-12 shrink-0', className)}>\n        <img\n          src={getIconUrl(app.iconName)}\n          alt={`${app.displayName} icon`}\n          className=\"size-12 rounded-lg object-contain\"\n          onError={() => setImageError(true)}\n        />\n      </div>\n    )\n  }\n\n  // Fallback icon\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center rounded-lg bg-primary/10 text-primary size-12 shrink-0',\n        className,\n      )}\n    >\n      <AppWindow className=\"size-6\" />\n    </div>\n  )\n}\n\nfunction AppScreenshot({ app }: { app: AppForCatalog }) {\n  const [imageError, setImageError] = React.useState(false)\n  const [isLoadingImage, setIsLoadingImage] = React.useState(true)\n\n  // Check if app has screenshots\n  const screenshotId = app.screenshotIds?.[0]\n  if (!screenshotId) {\n    return (\n      <div className=\"w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64\">\n        <div className=\"w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm\">\n          No screenshot available\n        </div>\n      </div>\n    )\n  }\n\n  const screenshotImageUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'}/api/screenshots/${screenshotId}?size=512`\n\n  return (\n    <div className=\"w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64\">\n      {!imageError ? (\n        <img\n          src={screenshotImageUrl}\n          alt={`${app.displayName} screenshot`}\n          className=\"w-full h-64 object-contain\"\n          onError={() => {\n            setImageError(true)\n            setIsLoadingImage(false)\n          }}\n          onLoad={() => setIsLoadingImage(false)}\n        />\n      ) : null}\n      {(imageError || isLoadingImage) && (\n        <div className=\"w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm\">\n          {isLoadingImage ? 'Loading screenshot...' : 'No screenshot available'}\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction AppDetails({ app }: { app: AppForCatalog }) {\n  const [isGalleryOpen, setIsGalleryOpen] = React.useState(false)\n  const [galleryInitialIndex, setGalleryInitialIndex] = React.useState(0)\n\n  const handleScreenshotClick = (index: number) => {\n    setGalleryInitialIndex(index)\n    setIsGalleryOpen(true)\n  }\n\n  return (\n    <>\n      <div className=\"flex h-full flex-col overflow-y-auto p-6\">\n        {/* Icon and Title */}\n        <div className=\"flex items-center gap-4 border-b pb-6\">\n          <AppIcon app={app} className=\"size-16\" />\n          <div>\n            <h2 className=\"text-2xl font-semibold\">{app.displayName}</h2>\n            {app.appUrl && (\n              <a\n                href={app.appUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"mt-1 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-primary\"\n              >\n                {app.appUrl.replaceAll(/https?:\\/\\//g, '')}\n                <ExternalLink className=\"size-3\" />\n              </a>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {app.description && (\n          <div className=\"mt-6\">\n            <h3 className=\"mb-2 text-sm font-medium\">Description</h3>\n            <p className=\"text-sm text-muted-foreground\">{app.description}</p>\n          </div>\n        )}\n\n        {/* Tags */}\n        {app.tags && app.tags.length > 0 && (\n          <div className=\"mt-6\">\n            <h3 className=\"mb-2 text-sm font-medium\">Tags</h3>\n            <div className=\"flex flex-wrap gap-2\">\n              {app.tags.map((tag) => (\n                <Badge key={tag} variant=\"secondary\" className=\"text-xs\">\n                  {tag}\n                </Badge>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Teams */}\n        {app.teams && app.teams.length > 0 && (\n          <div className=\"mt-6\">\n            <h3 className=\"mb-2 text-sm font-medium\">Teams</h3>\n            <div className=\"flex flex-wrap gap-2\">\n              {app.teams.map((team) => (\n                <Badge key={team} variant=\"outline\" className=\"text-xs\">\n                  {team}\n                </Badge>\n              ))}\n            </div>\n          </div>\n        )}\n\n        {/* Screenshots - Clickable preview */}\n        {app.screenshotIds && app.screenshotIds.length > 0 && (\n          <div className=\"mt-6\">\n            <h3 className=\"mb-2 text-sm font-medium\">\n              Screenshots ({app.screenshotIds.length})\n            </h3>\n            <div\n              className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n              onClick={() => handleScreenshotClick(0)}\n            >\n              <AppScreenshot app={app} />\n              {app.screenshotIds.length > 1 && (\n                <p className=\"text-xs text-muted-foreground mt-2 text-center\">\n                  Click to view all {app.screenshotIds.length} screenshots\n                </p>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Screenshot Gallery Dialog */}\n      <ScreenshotGallery\n        app={app}\n        screenshotIds={app.screenshotIds || []}\n        open={isGalleryOpen}\n        onOpenChange={setIsGalleryOpen}\n        initialIndex={galleryInitialIndex}\n        title={`${app.displayName} - Screenshots`}\n      />\n    </>\n  )\n}\n\ninterface GroupedApps {\n  groupName: string\n  apps: Array<AppForCatalog>\n}\n\nfunction groupApps(\n  apps: Array<AppForCatalog>,\n  groupingDef?: GroupingTagDefinition,\n): Array<GroupedApps> {\n  if (!groupingDef) {\n    const sortedApps = [...apps].sort((a, b) =>\n      a.displayName.localeCompare(b.displayName),\n    )\n    return [{ groupName: 'All Apps', apps: sortedApps }]\n  }\n\n  const grouped = new Map<string, Array<AppForCatalog>>()\n  const ungrouped: Array<AppForCatalog> = []\n\n  for (const app of apps) {\n    const matchingTag = app.tags?.find((tag) =>\n      tag.startsWith(`${groupingDef.prefix}:`),\n    )\n\n    if (matchingTag) {\n      const value = matchingTag.split(':')[1]\n      if (value) {\n        const tagValue = groupingDef.values.find((v) => v.value === value)\n        const displayName = tagValue?.displayName || value\n\n        if (!grouped.has(displayName)) {\n          grouped.set(displayName, [])\n        }\n        grouped.get(displayName)!.push(app)\n      } else {\n        ungrouped.push(app)\n      }\n    } else {\n      ungrouped.push(app)\n    }\n  }\n\n  const result: Array<GroupedApps> = []\n  for (const [groupName, appsInGroup] of grouped) {\n    // Sort apps alphabetically within each group\n    const sortedGroupApps = appsInGroup.sort((a, b) =>\n      a.displayName.localeCompare(b.displayName),\n    )\n    result.push({ groupName, apps: sortedGroupApps })\n  }\n\n  if (ungrouped.length > 0) {\n    // Sort ungrouped apps alphabetically\n    const sortedUngrouped = ungrouped.sort((a, b) =>\n      a.displayName.localeCompare(b.displayName),\n    )\n    result.push({ groupName: 'Other', apps: sortedUngrouped })\n  }\n\n  return result\n}\n\nexport function AppCatalogGrid({\n  apps,\n  selectedAppSlug,\n  groupingDefinition,\n  onAppClick,\n  onCloseDetails,\n}: AppCatalogGridProps) {\n  const tableRef = React.useRef<HTMLTableElement>(null)\n  const rowRefs = React.useRef<Map<string, HTMLTableRowElement>>(new Map())\n  const lastClickedRef = React.useRef<string | null>(null)\n\n  const selectedApp = selectedAppSlug\n    ? apps.find((a) => a.slug === selectedAppSlug)\n    : null\n\n  const groupedApps = groupApps(apps, groupingDefinition)\n\n  // Auto-scroll when app is selected from URL (not from click)\n  React.useEffect(() => {\n    if (selectedAppSlug && selectedAppSlug !== lastClickedRef.current) {\n      const rowElement = rowRefs.current.get(selectedAppSlug)\n      if (rowElement) {\n        rowElement.scrollIntoView({ behavior: 'smooth', block: 'center' })\n      }\n    }\n  }, [selectedAppSlug])\n\n  const handleAppClick = (app: AppForCatalog) => {\n    lastClickedRef.current = app.slug\n    onAppClick?.(app)\n  }\n\n  return (\n    <div\n      className={cn(\n        'grid gap-4 w-full',\n        selectedApp ? 'grid-cols-[1fr_400px]' : 'grid-cols-1',\n      )}\n    >\n      {/* Left Column - Table */}\n      <div className=\"overflow-y-auto\">\n        <table className=\"w-full table-fixed\" ref={tableRef}>\n          <thead className=\"sticky top-0 border-b bg-background z-10\">\n            <tr>\n              <th className=\"px-4 py-3 text-left font-medium text-sm\">\n                Application\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-sm\">\n                Description\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {groupedApps.map((group) => (\n              <React.Fragment key={group.groupName}>\n                {/* Group Header */}\n                <tr className=\"bg-muted/50\">\n                  <td\n                    colSpan={2}\n                    className=\"px-4 py-6 sticky top-[49px] bg-muted/90 backdrop-blur z-10\"\n                  >\n                    <div className=\"flex items-center justify-center\">\n                      <span className=\"font-bold text-lg tracking-widest uppercase leading-loose text-muted-foreground\">\n                        {group.groupName}\n                      </span>\n                    </div>\n                  </td>\n                </tr>\n                {/* Group Apps */}\n                {group.apps.map((app) => (\n                  <tr\n                    key={app.id}\n                    ref={(el) => {\n                      if (el && app.slug) {\n                        rowRefs.current.set(app.slug, el)\n                      } else if (app.slug) {\n                        rowRefs.current.delete(app.slug)\n                      }\n                    }}\n                    onClick={() => handleAppClick(app)}\n                    className={cn(\n                      'border-b cursor-pointer transition-colors',\n                      selectedApp?.id === app.id\n                        ? 'bg-blue-100 dark:bg-blue-950 hover:bg-blue-200 dark:hover:bg-blue-900'\n                        : 'hover:bg-muted/30',\n                    )}\n                  >\n                    <td className=\"px-4 py-4\">\n                      <div className=\"flex items-center gap-3\">\n                        <AppIcon app={app} className=\"size-6\" />\n                        <span className=\"font-medium\">\n                          {app.displayName || 'Unnamed App'}\n                        </span>\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-4\">\n                      <span className=\"text-sm text-muted-foreground line-clamp-2\">\n                        {app.description || '—'}\n                      </span>\n                    </td>\n                  </tr>\n                ))}\n              </React.Fragment>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {/* Right Column - Sticky Detail Panel */}\n      {selectedApp && (\n        <div className=\"sticky top-0 max-h-screen overflow-hidden\">\n          <div className=\"h-full overflow-y-auto border-l bg-background relative\">\n            {/* Close Button */}\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"absolute top-4 right-4 z-20 size-8 rounded-full bg-background/80 backdrop-blur hover:bg-background\"\n              onClick={onCloseDetails}\n            >\n              <X className=\"size-4\" />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n            <AppDetails app={selectedApp} />\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React"],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/grid/AppCatalogTable.d.ts

@@ -0,0 +1,5 @@
+import { AppForCatalog } from '@env-hopper/backend-core';
+export interface AppCatalogTableProps {
+    apps: Array<AppForCatalog>;
+}
+export declare function AppCatalogTable({ apps }: AppCatalogTableProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/grid/appCatalogUtils.d.ts

@@ -0,0 +1,2 @@
+import { AppForCatalog } from '@env-hopper/backend-core';
+export declare function getAppUrl(app: AppForCatalog): string;

package/dist/esm/modules/appCatalog/ui/layout/AppCatalogLayout.d.ts

@@ -0,0 +1,9 @@
+import { TRPCRouter } from '@env-hopper/backend-core';
+import { QueryClient } from '@tanstack/react-query';
+import { TRPCClient } from '@trpc/client';
+export interface AppCatalogLayoutProps {
+    children: React.ReactNode;
+    queryClient: QueryClient;
+    trpcClient: TRPCClient<TRPCRouter>;
+}
+export declare function AppCatalogLayout({ children, queryClient, trpcClient, }: AppCatalogLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/layout/AppCatalogLayout.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HomeIcon } from "lucide-react";
+import { AppCatalogProvider } from "../../context/AppCatalogContext.js";
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "../../../../ui/breadcrumb.js";
+import { MainLayout } from "../../../../ui/layout/MainLayout.js";
+import { TopLevelProviders } from "../../../../ui/layout/TopLevelProviders.js";
+import { Link } from "../../../../ui/link.js";
+function AppCatalogLayout({
+  children,
+  queryClient,
+  trpcClient
+}) {
+  return /* @__PURE__ */ jsx(TopLevelProviders, { queryClient, trpcClient, children: /* @__PURE__ */ jsx(AppCatalogProvider, { children: /* @__PURE__ */ jsxs(MainLayout, { children: [
+    /* @__PURE__ */ jsx(Breadcrumb, { className: "pb-4", children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(HomeIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Home" })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
+      /* @__PURE__ */ jsx(BreadcrumbItem, { children: /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link, { to: "/catalog/apps", children: "App Catalog" }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 w-full justify-center", children })
+  ] }) }) });
+}
+export {
+  AppCatalogLayout
+};
+//# sourceMappingURL=AppCatalogLayout.js.map

package/dist/esm/modules/appCatalog/ui/layout/AppCatalogLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppCatalogLayout.js","sources":["../../../../../../src/modules/appCatalog/ui/layout/AppCatalogLayout.tsx"],"sourcesContent":["import type { TRPCRouter } from '@env-hopper/backend-core'\nimport type { QueryClient } from '@tanstack/react-query'\nimport type { TRPCClient } from '@trpc/client'\nimport { HomeIcon } from 'lucide-react'\nimport { AppCatalogProvider } from '~/modules/appCatalog/context/AppCatalogContext'\nimport {\n    Breadcrumb,\n    BreadcrumbItem,\n    BreadcrumbLink,\n    BreadcrumbList,\n    BreadcrumbSeparator,\n} from '~/ui/breadcrumb'\nimport { MainLayout } from '~/ui/layout/MainLayout'\nimport { TopLevelProviders } from '~/ui/layout/TopLevelProviders'\nimport { Link } from '~/ui/link'\n\nexport interface AppCatalogLayoutProps {\n  children: React.ReactNode\n  queryClient: QueryClient\n  trpcClient: TRPCClient<TRPCRouter>\n}\n\nexport function AppCatalogLayout({\n  children,\n  queryClient,\n  trpcClient,\n}: AppCatalogLayoutProps) {\n  return (\n    <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>\n      <AppCatalogProvider>\n        <MainLayout>\n          <Breadcrumb className=\"pb-4\">\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link to={'/'} className=\"flex items-center gap-1\">\n                    <HomeIcon className=\"size-4\" />\n                    <span className=\"sr-only\">Home</span>\n                  </Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator />\n              <BreadcrumbItem>\n                <BreadcrumbLink asChild>\n                  <Link to=\"/catalog/apps\">App Catalog</Link>\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <div className=\"flex flex-1 w-full justify-center\">{children}</div>\n        </MainLayout>\n      </AppCatalogProvider>\n    </TopLevelProviders>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAsBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,6BACG,mBAAA,EAAkB,aAA0B,YAC3C,UAAA,oBAAC,oBAAA,EACC,+BAAC,YAAA,EACC,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,WAAU,QACpB,UAAA,qBAAC,gBAAA,EACC,UAAA;AAAA,MAAA,oBAAC,gBAAA,EACC,UAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,+BAAC,MAAA,EAAK,IAAI,KAAK,WAAU,2BACvB,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAS,WAAU,SAAA,CAAS;AAAA,QAC7B,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CAChC,GACF,GACF;AAAA,0BACC,qBAAA,EAAoB;AAAA,MACrB,oBAAC,gBAAA,EACC,UAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA,oBAAC,MAAA,EAAK,IAAG,iBAAgB,UAAA,cAAA,CAAW,EAAA,CACtC,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,qCAAqC,SAAA,CAAS;AAAA,EAAA,EAAA,CAC/D,GACF,GACF;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/pages/AppCatalogPage.d.ts

@@ -0,0 +1 @@
+export declare function AppCatalogPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/appCatalog/ui/pages/AppCatalogPage.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
+import { useState, useMemo } from "react";
+import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
+import { AppCatalogGrid } from "../grid/AppCatalogGrid.js";
+import { Input } from "../../../../ui/input.js";
+function AppCatalogPage() {
+  const navigate = useNavigate();
+  const router = useRouter();
+  const search = useSearch({ strict: false });
+  const { apps, isLoadingApps, tagsDefinitions } = useAppCatalogContext();
+  const [searchValue, setSearchValue] = useState("");
+  const filterTag = search.filterTag;
+  const selectedAppSlug = search.app;
+  const filteredApps = useMemo(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+    return apps.filter((app) => {
+      var _a, _b;
+      if (normalizedSearchValue === "") {
+        return true;
+      }
+      const name = app.displayName.toLowerCase() || "";
+      const slug = app.slug.toLowerCase() || "";
+      const description = ((_a = app.description) == null ? void 0 : _a.toLowerCase()) || "";
+      const tags = ((_b = app.tags) == null ? void 0 : _b.join(" ").toLowerCase()) || "";
+      return name.includes(normalizedSearchValue) || slug.includes(normalizedSearchValue) || description.includes(normalizedSearchValue) || tags.includes(normalizedSearchValue);
+    }).filter((app) => {
+      var _a;
+      return filterTag === void 0 || ((_a = app.tags) == null ? void 0 : _a.some((tag) => tag.toLowerCase() === filterTag.toLowerCase()));
+    });
+  }, [apps, searchValue, filterTag]);
+  const handleAppClick = (app) => {
+    const currentPath = router.state.location.pathname;
+    navigate({ to: currentPath, search: { ...search, app: app.slug } });
+  };
+  const handleCloseDetails = () => {
+    const currentPath = router.state.location.pathname;
+    const { app: _app, ...restSearch } = search;
+    navigate({ to: currentPath, search: restSearch });
+  };
+  if (isLoadingApps) {
+    return /* @__PURE__ */ jsx("div", { className: "py-6 text-muted-foreground", children: "Loading…" });
+  }
+  const groupingDefinition = tagsDefinitions[0];
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4 pb-4", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-2xl", children: "App Catalog" }),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+          filteredApps.length,
+          " apps available"
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: searchValue,
+          onChange: (e) => setSearchValue(e.target.value),
+          placeholder: "Search apps by name, description, or tags…",
+          "aria-label": "Search apps"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+      AppCatalogGrid,
+      {
+        apps: filteredApps,
+        selectedAppSlug,
+        groupingDefinition,
+        onAppClick: handleAppClick,
+        onCloseDetails: handleCloseDetails
+      }
+    ) })
+  ] });
+}
+export {
+  AppCatalogPage
+};
+//# sourceMappingURL=AppCatalogPage.js.map