@igstack/app-catalog-frontend-core 0.0.1

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

@@ -0,0 +1,325 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
+import { AppWindow, ExternalLink } from "lucide-react";
+import React__default from "react";
+import { cn } from "../../../../lib/utils.js";
+import { Badge } from "../../../../ui/badge.js";
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "../../../../ui/resizable.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../../ui/table.js";
+import { AccessRequestSection } from "../components/AccessRequestSection.js";
+import { ScreenshotGallery } from "../components/ScreenshotGallery.js";
+import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
+import { useKeyboardNavigation } from "../hooks/useKeyboardNavigation.js";
+function getIconUrl(iconName) {
+  return `/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__ */ jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg overflow-hidden inline-flex items-center justify-center min-h-64", children: [
+    !imageError ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: screenshotImageUrl,
+        alt: `${app.displayName} screenshot`,
+        className: "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 { approvalMethods } = useAppCatalogContext();
+  const handleScreenshotClick = (index) => {
+    setGalleryInitialIndex(index);
+    setIsGalleryOpen(true);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col 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.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(AccessRequestSection, { app, approvalMethods }),
+      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)) })
+      ] })
+    ] }),
+    /* @__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
+}) {
+  const selectedApp = selectedAppSlug ? apps.find((a) => a.slug === selectedAppSlug) : null;
+  const groupedApps = groupApps(apps, groupingDefinition);
+  const appsInDisplayOrder = React__default.useMemo(
+    () => groupedApps.flatMap((group) => group.apps),
+    [groupedApps]
+  );
+  const { rowRefs } = useKeyboardNavigation({
+    apps: appsInDisplayOrder,
+    selectedAppSlug,
+    onAppClick
+  });
+  const columns = React__default.useMemo(
+    () => [
+      {
+        id: "application",
+        header: "Application",
+        cell: ({ row }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(AppIcon, { app: row.original, className: "size-6" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: row.original.displayName || "Unnamed App" })
+        ] }),
+        meta: {
+          className: "w-[300px]"
+        }
+      },
+      {
+        id: "description",
+        header: "Description",
+        cell: ({ row }) => /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground line-clamp-2", children: row.original.description || "—" })
+      }
+    ],
+    []
+  );
+  const table = useReactTable({
+    data: apps,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row) => row.id
+  });
+  const hasScrolledRef = React__default.useRef(false);
+  React__default.useEffect(() => {
+    if (selectedAppSlug && !hasScrolledRef.current) {
+      const rowElement = rowRefs.current.get(selectedAppSlug);
+      if (rowElement) {
+        rowElement.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+      hasScrolledRef.current = true;
+    }
+  }, [selectedAppSlug, rowRefs]);
+  const handleAppClick = (app) => {
+    onAppClick == null ? void 0 : onAppClick(app);
+  };
+  return /* @__PURE__ */ jsxs(ResizablePanelGroup, { orientation: "horizontal", className: "h-full w-full", children: [
+    /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 60, minSize: 30, className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto pr-2", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { className: "sticky top-0 border-b bg-background z-10", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: cn(
+              "px-4 py-3 text-left font-medium text-sm",
+              (_a = header.column.columnDef.meta) == null ? void 0 : _a.className
+            ),
+            children: header.isPlaceholder ? null : flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            )
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: groupedApps.map((group) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        /* @__PURE__ */ jsx(TableRow, { className: "bg-muted/50 hover:bg-muted/50", children: /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            colSpan: columns.length,
+            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) => {
+          const row = table.getRowModel().rows.find((r) => r.id === app.id);
+          if (!row) return null;
+          return /* @__PURE__ */ jsx(
+            TableRow,
+            {
+              ref: (el) => {
+                if (el && row.original.slug) {
+                  rowRefs.current.set(row.original.slug, el);
+                } else if (row.original.slug) {
+                  rowRefs.current.delete(row.original.slug);
+                }
+              },
+              onClick: () => handleAppClick(row.original),
+              className: cn(
+                "border-b cursor-pointer transition-colors",
+                (selectedApp == null ? void 0 : selectedApp.id) === row.original.id ? "bg-blue-100 dark:bg-blue-950 hover:bg-blue-200 dark:hover:bg-blue-900" : "hover:bg-muted/30"
+              ),
+              children: row.getVisibleCells().map((cell) => {
+                var _a;
+                return /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    className: cn(
+                      "px-4 py-4",
+                      (_a = cell.column.columnDef.meta) == null ? void 0 : _a.className
+                    ),
+                    children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )
+                  },
+                  cell.id
+                );
+              })
+            },
+            row.id
+          );
+        })
+      ] }, group.groupName)) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(ResizableHandle, { withHandle: true }),
+    /* @__PURE__ */ jsx(ResizablePanel, { defaultSize: 40, minSize: 25, className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto border-l bg-background pl-4", children: selectedApp ? /* @__PURE__ */ jsx(AppDetails, { app: selectedApp }) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground", children: "Select an app to view details" }) }) })
+  ] });
+}
+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 type {\n  AppForCatalog,\n  GroupingTagDefinition,\n} from '@igstack/app-catalog-backend-core'\nimport type { ColumnDef } from '@tanstack/react-table'\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { AppWindow, ExternalLink } from 'lucide-react'\nimport React from 'react'\n\nimport { cn } from '~/lib/utils'\nimport type {} from '~/types/table'\nimport { Badge } from '~/ui/badge'\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '~/ui/resizable'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { AccessRequestSection } from '../components/AccessRequestSection'\nimport { ScreenshotGallery } from '../components/ScreenshotGallery'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useKeyboardNavigation } from '../hooks/useKeyboardNavigation'\n\nexport interface AppCatalogGridProps {\n  apps: Array<AppForCatalog>\n  selectedAppSlug?: string\n  groupingDefinition?: GroupingTagDefinition\n  onAppClick?: (app: AppForCatalog) => void\n}\n\nfunction getIconUrl(iconName: string): string {\n  return `/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 = `/api/screenshots/${screenshotId}?size=512`\n\n  return (\n    <div className=\"w-full flex justify-center\">\n      <div className=\"rounded-lg overflow-hidden inline-flex items-center justify-center min-h-64\">\n        {!imageError ? (\n          <img\n            src={screenshotImageUrl}\n            alt={`${app.displayName} screenshot`}\n            className=\"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\n              ? 'Loading screenshot...'\n              : 'No screenshot available'}\n          </div>\n        )}\n      </div>\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  const { approvalMethods } = useAppCatalogContext()\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 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        {/* 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\n        {/* Access Request Section */}\n        <AccessRequestSection app={app} approvalMethods={approvalMethods} />\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      </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}: AppCatalogGridProps) {\n  const selectedApp = selectedAppSlug\n    ? apps.find((a) => a.slug === selectedAppSlug)\n    : null\n\n  const groupedApps = groupApps(apps, groupingDefinition)\n\n  // Flatten grouped apps to get display order for keyboard navigation\n  const appsInDisplayOrder = React.useMemo(\n    () => groupedApps.flatMap((group) => group.apps),\n    [groupedApps],\n  )\n\n  // Use keyboard navigation hook with apps in display order\n  const { rowRefs } = useKeyboardNavigation({\n    apps: appsInDisplayOrder,\n    selectedAppSlug,\n    onAppClick,\n  })\n\n  // Define columns\n  const columns = React.useMemo<Array<ColumnDef<AppForCatalog>>>(\n    () => [\n      {\n        id: 'application',\n        header: 'Application',\n        cell: ({ row }) => (\n          <div className=\"flex items-center gap-3\">\n            <AppIcon app={row.original} className=\"size-6\" />\n            <span className=\"font-medium\">\n              {row.original.displayName || 'Unnamed App'}\n            </span>\n          </div>\n        ),\n        meta: {\n          className: 'w-[300px]',\n        },\n      },\n      {\n        id: 'description',\n        header: 'Description',\n        cell: ({ row }) => (\n          <span className=\"text-sm text-muted-foreground line-clamp-2\">\n            {row.original.description || '—'}\n          </span>\n        ),\n      },\n    ],\n    [],\n  )\n\n  // Create a single table instance with all apps\n  const table = useReactTable({\n    data: apps,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getRowId: (row) => row.id,\n  })\n\n  // Auto-scroll to selected app (only on initial load)\n  const hasScrolledRef = React.useRef(false)\n  React.useEffect(() => {\n    // Only scroll once on initial load if there's a selection\n    if (selectedAppSlug && !hasScrolledRef.current) {\n      const rowElement = rowRefs.current.get(selectedAppSlug)\n      if (rowElement) {\n        rowElement.scrollIntoView({ behavior: 'smooth', block: 'center' })\n      }\n      hasScrolledRef.current = true\n    }\n  }, [selectedAppSlug, rowRefs])\n\n  const handleAppClick = (app: AppForCatalog) => {\n    onAppClick?.(app)\n  }\n\n  return (\n    <ResizablePanelGroup orientation=\"horizontal\" className=\"h-full w-full\">\n      {/* Left Panel - Table */}\n      <ResizablePanel defaultSize={60} minSize={30} className=\"overflow-hidden\">\n        <div className=\"h-full overflow-y-auto pr-2\">\n          <Table>\n            <TableHeader className=\"sticky top-0 border-b bg-background z-10\">\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  {headerGroup.headers.map((header) => (\n                    <TableHead\n                      key={header.id}\n                      className={cn(\n                        'px-4 py-3 text-left font-medium text-sm',\n                        header.column.columnDef.meta?.className,\n                      )}\n                    >\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                    </TableHead>\n                  ))}\n                </TableRow>\n              ))}\n            </TableHeader>\n\n            <TableBody>\n              {groupedApps.map((group) => (\n                <React.Fragment key={group.groupName}>\n                  {/* Group Header Row */}\n                  <TableRow className=\"bg-muted/50 hover:bg-muted/50\">\n                    <TableCell\n                      colSpan={columns.length}\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                    </TableCell>\n                  </TableRow>\n\n                  {/* Group Apps */}\n                  {group.apps.map((app) => {\n                    const row = table\n                      .getRowModel()\n                      .rows.find((r) => r.id === app.id)\n                    if (!row) return null\n\n                    return (\n                      <TableRow\n                        key={row.id}\n                        ref={(el) => {\n                          if (el && row.original.slug) {\n                            rowRefs.current.set(row.original.slug, el)\n                          } else if (row.original.slug) {\n                            rowRefs.current.delete(row.original.slug)\n                          }\n                        }}\n                        onClick={() => handleAppClick(row.original)}\n                        className={cn(\n                          'border-b cursor-pointer transition-colors',\n                          selectedApp?.id === row.original.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                        {row.getVisibleCells().map((cell) => (\n                          <TableCell\n                            key={cell.id}\n                            className={cn(\n                              'px-4 py-4',\n                              cell.column.columnDef.meta?.className,\n                            )}\n                          >\n                            {flexRender(\n                              cell.column.columnDef.cell,\n                              cell.getContext(),\n                            )}\n                          </TableCell>\n                        ))}\n                      </TableRow>\n                    )\n                  })}\n                </React.Fragment>\n              ))}\n            </TableBody>\n          </Table>\n        </div>\n      </ResizablePanel>\n\n      {/* Resizable Handle */}\n      <ResizableHandle withHandle />\n\n      {/* Right Panel - Details */}\n      <ResizablePanel defaultSize={40} minSize={25} className=\"overflow-hidden\">\n        <div className=\"h-full overflow-y-auto border-l bg-background pl-4\">\n          {selectedApp ? (\n            <AppDetails app={selectedApp} />\n          ) : (\n            <div className=\"flex items-center justify-center h-full text-muted-foreground\">\n              Select an app to view details\n            </div>\n          )}\n        </div>\n      </ResizablePanel>\n    </ResizablePanelGroup>\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 '@igstack/app-catalog-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 '@igstack/app-catalog-backend-core';
+export declare function getAppUrl(app: AppForCatalog): string;

package/dist/esm/modules/appCatalog/ui/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,10 @@
+import { AppForCatalog } from '@igstack/app-catalog-backend-core';
+import { default as React } from 'react';
+export interface UseKeyboardNavigationProps {
+    apps: Array<AppForCatalog>;
+    selectedAppSlug?: string;
+    onAppClick?: (app: AppForCatalog) => void;
+}
+export declare function useKeyboardNavigation({ apps, selectedAppSlug, onAppClick, }: UseKeyboardNavigationProps): {
+    rowRefs: React.RefObject<Map<string, HTMLTableRowElement>>;
+};

package/dist/esm/modules/appCatalog/ui/hooks/useKeyboardNavigation.js

@@ -0,0 +1,36 @@
+import React__default from "react";
+function useKeyboardNavigation({
+  apps,
+  selectedAppSlug,
+  onAppClick
+}) {
+  const rowRefs = React__default.useRef(/* @__PURE__ */ new Map());
+  React__default.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+      event.preventDefault();
+      const currentIndex = selectedAppSlug ? apps.findIndex((app) => app.slug === selectedAppSlug) : -1;
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, apps.length - 1);
+      } else {
+        nextIndex = currentIndex === -1 ? 0 : Math.max(currentIndex - 1, 0);
+      }
+      const nextApp = apps[nextIndex];
+      if (nextApp && nextApp.slug !== selectedAppSlug) {
+        onAppClick == null ? void 0 : onAppClick(nextApp);
+        const rowElement = rowRefs.current.get(nextApp.slug);
+        if (rowElement) {
+          rowElement.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [apps, selectedAppSlug, onAppClick]);
+  return { rowRefs };
+}
+export {
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/esm/modules/appCatalog/ui/hooks/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../../../../src/modules/appCatalog/ui/hooks/useKeyboardNavigation.ts"],"sourcesContent":["import type { AppForCatalog } from '@igstack/app-catalog-backend-core'\nimport React from 'react'\n\nexport interface UseKeyboardNavigationProps {\n  apps: Array<AppForCatalog>\n  selectedAppSlug?: string\n  onAppClick?: (app: AppForCatalog) => void\n}\n\nexport function useKeyboardNavigation({\n  apps,\n  selectedAppSlug,\n  onAppClick,\n}: UseKeyboardNavigationProps) {\n  const rowRefs = React.useRef<Map<string, HTMLTableRowElement>>(new Map())\n\n  // Keyboard navigation (ArrowUp/ArrowDown)\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return\n\n      // Prevent default scrolling behavior\n      event.preventDefault()\n\n      const currentIndex = selectedAppSlug\n        ? apps.findIndex((app) => app.slug === selectedAppSlug)\n        : -1\n\n      let nextIndex: number\n      if (event.key === 'ArrowDown') {\n        nextIndex =\n          currentIndex === -1 ? 0 : Math.min(currentIndex + 1, apps.length - 1)\n      } else {\n        nextIndex = currentIndex === -1 ? 0 : Math.max(currentIndex - 1, 0)\n      }\n\n      const nextApp = apps[nextIndex]\n      if (nextApp && nextApp.slug !== selectedAppSlug) {\n        onAppClick?.(nextApp)\n\n        // Scroll the newly selected row into view\n        const rowElement = rowRefs.current.get(nextApp.slug)\n        if (rowElement) {\n          rowElement.scrollIntoView({ behavior: 'smooth', block: 'center' })\n        }\n      }\n    }\n\n    window.addEventListener('keydown', handleKeyDown)\n    return () => window.removeEventListener('keydown', handleKeyDown)\n  }, [apps, selectedAppSlug, onAppClick])\n\n  return { rowRefs }\n}\n"],"names":["React"],"mappings":";AASO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAA+B;AAC7B,QAAM,UAAUA,eAAM,OAAyC,oBAAI,KAAK;AAGxEA,iBAAM,UAAU,MAAM;AACpB,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,YAAa;AAG1D,YAAM,eAAA;AAEN,YAAM,eAAe,kBACjB,KAAK,UAAU,CAAC,QAAQ,IAAI,SAAS,eAAe,IACpD;AAEJ,UAAI;AACJ,UAAI,MAAM,QAAQ,aAAa;AAC7B,oBACE,iBAAiB,KAAK,IAAI,KAAK,IAAI,eAAe,GAAG,KAAK,SAAS,CAAC;AAAA,MACxE,OAAO;AACL,oBAAY,iBAAiB,KAAK,IAAI,KAAK,IAAI,eAAe,GAAG,CAAC;AAAA,MACpE;AAEA,YAAM,UAAU,KAAK,SAAS;AAC9B,UAAI,WAAW,QAAQ,SAAS,iBAAiB;AAC/C,iDAAa;AAGb,cAAM,aAAa,QAAQ,QAAQ,IAAI,QAAQ,IAAI;AACnD,YAAI,YAAY;AACd,qBAAW,eAAe,EAAE,UAAU,UAAU,OAAO,UAAU;AAAA,QACnE;AAAA,MACF;AAAA,IACF;AAEA,WAAO,iBAAiB,WAAW,aAAa;AAChD,WAAO,MAAM,OAAO,oBAAoB,WAAW,aAAa;AAAA,EAClE,GAAG,CAAC,MAAM,iBAAiB,UAAU,CAAC;AAEtC,SAAO,EAAE,QAAA;AACX;"}

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

@@ -0,0 +1,9 @@
+import { TRPCRouter } from '@igstack/app-catalog-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 min-h-0", 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 '@igstack/app-catalog-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 min-h-0\">\n            {children}\n          </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,6CACZ,SAAA,CACH;AAAA,EAAA,EAAA,CACF,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,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useNavigate, useRouter, useSearch } from "@tanstack/react-router";
+import { useState, useRef, useEffect, 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 [selectedAppSlug, setSelectedAppSlug] = useState();
+  const filterTag = search.filterTag;
+  const isInitializedRef = useRef(false);
+  useEffect(() => {
+    if (!isInitializedRef.current) {
+      if (search.app) {
+        setSelectedAppSlug(search.app);
+      }
+      if (search.q) {
+        setSearchValue(search.q);
+      }
+      isInitializedRef.current = true;
+    }
+  }, [search.app, search.q]);
+  useEffect(() => {
+    if (!isInitializedRef.current) return;
+    if (selectedAppSlug === search.app) return;
+    const currentPath = router.state.location.pathname;
+    navigate({
+      to: currentPath,
+      search: { ...search, app: selectedAppSlug },
+      replace: true
+      // Use replace to avoid polluting history
+    });
+  }, [selectedAppSlug, navigate, router.state.location.pathname, search]);
+  useEffect(() => {
+    if (!isInitializedRef.current) return;
+    const normalizedSearchValue = searchValue.trim();
+    const urlSearchValue = search.q || "";
+    if (normalizedSearchValue === urlSearchValue) return;
+    const currentPath = router.state.location.pathname;
+    navigate({
+      to: currentPath,
+      search: {
+        ...search,
+        q: normalizedSearchValue || void 0
+        // Remove param if empty
+      },
+      replace: true
+      // Use replace to avoid polluting history
+    });
+  }, [searchValue, navigate, router.state.location.pathname, search]);
+  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) => {
+    setSelectedAppSlug(app.slug);
+  };
+  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 flex-1 min-h-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "pb-4 shrink-0", 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 min-h-0", children: /* @__PURE__ */ jsx(
+      AppCatalogGrid,
+      {
+        apps: filteredApps,
+        selectedAppSlug,
+        groupingDefinition,
+        onAppClick: handleAppClick
+      }
+    ) })
+  ] });
+}
+export {
+  AppCatalogPage
+};
+//# sourceMappingURL=AppCatalogPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import { useNavigate, useRouter, useSearch } from '@tanstack/react-router'\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { AppForCatalog } from '@igstack/app-catalog-backend-core'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { AppCatalogGrid } from '../grid/AppCatalogGrid'\n\nimport { Input } from '~/ui/input'\n\nexport function AppCatalogPage() {\n  const navigate = useNavigate()\n  const router = useRouter()\n  const search = useSearch({ strict: false })\n  const { apps, isLoadingApps, tagsDefinitions } = useAppCatalogContext()\n  const [searchValue, setSearchValue] = useState('')\n\n  // Local state for app selection (source of truth)\n  const [selectedAppSlug, setSelectedAppSlug] = useState<string | undefined>()\n\n  const filterTag = search.filterTag\n\n  // Initialize from URL on mount (once only)\n  const isInitializedRef = useRef(false)\n  useEffect(() => {\n    if (!isInitializedRef.current) {\n      if (search.app) {\n        setSelectedAppSlug(search.app)\n      }\n      if (search.q) {\n        setSearchValue(search.q)\n      }\n      isInitializedRef.current = true\n    }\n  }, [search.app, search.q])\n\n  // Sync app selection state to URL (async side effect)\n  useEffect(() => {\n    // Don't sync until after initialization\n    if (!isInitializedRef.current) return\n    if (selectedAppSlug === search.app) return // Already in sync\n\n    const currentPath = router.state.location.pathname\n    navigate({\n      to: currentPath,\n      search: { ...search, app: selectedAppSlug },\n      replace: true, // Use replace to avoid polluting history\n    })\n  }, [selectedAppSlug, navigate, router.state.location.pathname, search])\n\n  // Sync search value state to URL (async side effect)\n  useEffect(() => {\n    // Don't sync until after initialization\n    if (!isInitializedRef.current) return\n\n    const normalizedSearchValue = searchValue.trim()\n    const urlSearchValue = search.q || ''\n\n    if (normalizedSearchValue === urlSearchValue) return // Already in sync\n\n    const currentPath = router.state.location.pathname\n    navigate({\n      to: currentPath,\n      search: {\n        ...search,\n        q: normalizedSearchValue || undefined, // Remove param if empty\n      },\n      replace: true, // Use replace to avoid polluting history\n    })\n  }, [searchValue, navigate, router.state.location.pathname, search])\n\n  const filteredApps = useMemo(() => {\n    const normalizedSearchValue = searchValue.trim().toLowerCase()\n\n    return apps\n      .filter((app) => {\n        if (normalizedSearchValue === '') {\n          return true\n        }\n        const name = app.displayName.toLowerCase() || ''\n        const slug = app.slug.toLowerCase() || ''\n        const description = app.description?.toLowerCase() || ''\n        const tags = app.tags?.join(' ').toLowerCase() || ''\n\n        return (\n          name.includes(normalizedSearchValue) ||\n          slug.includes(normalizedSearchValue) ||\n          description.includes(normalizedSearchValue) ||\n          tags.includes(normalizedSearchValue)\n        )\n      })\n      .filter((app) => {\n        return (\n          filterTag === undefined ||\n          app.tags?.some((tag) => tag.toLowerCase() === filterTag.toLowerCase())\n        )\n      })\n  }, [apps, searchValue, filterTag])\n\n  const handleAppClick = (app: AppForCatalog) => {\n    setSelectedAppSlug(app.slug)\n  }\n\n  if (isLoadingApps) {\n    return <div className=\"py-6 text-muted-foreground\">Loading…</div>\n  }\n\n  // Use first tag definition for grouping\n  const groupingDefinition = tagsDefinitions[0]\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0\">\n      <div className=\"pb-4 shrink-0\">\n        <div className=\"flex items-start justify-between gap-4 pb-4\">\n          <div>\n            <div className=\"font-medium text-2xl\">App Catalog</div>\n            <div className=\"text-sm text-muted-foreground\">\n              {filteredApps.length} apps available\n            </div>\n          </div>\n        </div>\n\n        <div className=\"w-full\">\n          <Input\n            value={searchValue}\n            onChange={(e) => setSearchValue(e.target.value)}\n            placeholder=\"Search apps by name, description, or tags…\"\n            aria-label=\"Search apps\"\n          />\n        </div>\n      </div>\n\n      <div className=\"flex-1 min-h-0\">\n        <AppCatalogGrid\n          apps={filteredApps}\n          selectedAppSlug={selectedAppSlug}\n          groupingDefinition={groupingDefinition}\n          onAppClick={handleAppClick}\n        />\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AASO,SAAS,iBAAiB;AAC/B,QAAM,WAAW,YAAA;AACjB,QAAM,SAAS,UAAA;AACf,QAAM,SAAS,UAAU,EAAE,QAAQ,OAAO;AAC1C,QAAM,EAAE,MAAM,eAAe,gBAAA,IAAoB,qBAAA;AACjD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAGjD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAA;AAE9C,QAAM,YAAY,OAAO;AAGzB,QAAM,mBAAmB,OAAO,KAAK;AACrC,YAAU,MAAM;AACd,QAAI,CAAC,iBAAiB,SAAS;AAC7B,UAAI,OAAO,KAAK;AACd,2BAAmB,OAAO,GAAG;AAAA,MAC/B;AACA,UAAI,OAAO,GAAG;AACZ,uBAAe,OAAO,CAAC;AAAA,MACzB;AACA,uBAAiB,UAAU;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;AAGzB,YAAU,MAAM;AAEd,QAAI,CAAC,iBAAiB,QAAS;AAC/B,QAAI,oBAAoB,OAAO,IAAK;AAEpC,UAAM,cAAc,OAAO,MAAM,SAAS;AAC1C,aAAS;AAAA,MACP,IAAI;AAAA,MACJ,QAAQ,EAAE,GAAG,QAAQ,KAAK,gBAAA;AAAA,MAC1B,SAAS;AAAA;AAAA,IAAA,CACV;AAAA,EACH,GAAG,CAAC,iBAAiB,UAAU,OAAO,MAAM,SAAS,UAAU,MAAM,CAAC;AAGtE,YAAU,MAAM;AAEd,QAAI,CAAC,iBAAiB,QAAS;AAE/B,UAAM,wBAAwB,YAAY,KAAA;AAC1C,UAAM,iBAAiB,OAAO,KAAK;AAEnC,QAAI,0BAA0B,eAAgB;AAE9C,UAAM,cAAc,OAAO,MAAM,SAAS;AAC1C,aAAS;AAAA,MACP,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG,yBAAyB;AAAA;AAAA,MAAA;AAAA,MAE9B,SAAS;AAAA;AAAA,IAAA,CACV;AAAA,EACH,GAAG,CAAC,aAAa,UAAU,OAAO,MAAM,SAAS,UAAU,MAAM,CAAC;AAElE,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,wBAAwB,YAAY,KAAA,EAAO,YAAA;AAEjD,WAAO,KACJ,OAAO,CAAC,QAAQ;;AACf,UAAI,0BAA0B,IAAI;AAChC,eAAO;AAAA,MACT;AACA,YAAM,OAAO,IAAI,YAAY,YAAA,KAAiB;AAC9C,YAAM,OAAO,IAAI,KAAK,YAAA,KAAiB;AACvC,YAAM,gBAAc,SAAI,gBAAJ,mBAAiB,kBAAiB;AACtD,YAAM,SAAO,SAAI,SAAJ,mBAAU,KAAK,KAAK,kBAAiB;AAElD,aACE,KAAK,SAAS,qBAAqB,KACnC,KAAK,SAAS,qBAAqB,KACnC,YAAY,SAAS,qBAAqB,KAC1C,KAAK,SAAS,qBAAqB;AAAA,IAEvC,CAAC,EACA,OAAO,CAAC,QAAQ;;AACf,aACE,cAAc,YACd,SAAI,SAAJ,mBAAU,KAAK,CAAC,QAAQ,IAAI,YAAA,MAAkB,UAAU,YAAA;AAAA,IAE5D,CAAC;AAAA,EACL,GAAG,CAAC,MAAM,aAAa,SAAS,CAAC;AAEjC,QAAM,iBAAiB,CAAC,QAAuB;AAC7C,uBAAmB,IAAI,IAAI;AAAA,EAC7B;AAEA,MAAI,eAAe;AACjB,WAAO,oBAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,YAAQ;AAAA,EAC7D;AAGA,QAAM,qBAAqB,gBAAgB,CAAC;AAE5C,SACE,qBAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,+CACb,UAAA,qBAAC,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,eAAW;AAAA,QACjD,qBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA;AAAA,UAAA,aAAa;AAAA,UAAO;AAAA,QAAA,EAAA,CACvB;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,MAEA,oBAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,UAC9C,aAAY;AAAA,UACZ,cAAW;AAAA,QAAA;AAAA,MAAA,EACb,CACF;AAAA,IAAA,GACF;AAAA,IAEA,oBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,IAAA,EACd,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/modules/approvalMethod/AccessRequestFormFields.d.ts

@@ -0,0 +1,7 @@
+import { Control, FieldValues } from 'react-hook-form';
+interface AccessRequestFormFieldsProps {
+    control: Control<FieldValues>;
+    approvalMethodId: string | undefined;
+}
+export declare function AccessRequestFormFields({ control, approvalMethodId, }: AccessRequestFormFieldsProps): import("react/jsx-runtime").JSX.Element;
+export {};