@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.1

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

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X, ExternalLink, AppWindow } from "lucide-react";
+import React__default, { useEffect } from "react";
+import { Badge } from "../../../../ui/badge.js";
+import { Button } from "../../../../ui/button.js";
+import { ScrollArea } from "../../../../ui/scroll-area.js";
+import { Separator } from "../../../../ui/separator.js";
+function getIconUrl(iconName) {
+  const baseUrl = "/";
+  return `${baseUrl}/api/icons/by-name/${iconName}`;
+}
+function AppIcon({ app }) {
+  const [imageError, setImageError] = React__default.useState(false);
+  if (app.iconName && !imageError) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: getIconUrl(app.iconName),
+        alt: `${app.displayName} icon`,
+        className: "size-16 rounded-lg object-contain",
+        onError: () => setImageError(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center rounded-lg bg-primary/10 text-primary size-16", children: /* @__PURE__ */ jsx(AppWindow, { className: "size-8" }) });
+}
+function ScreenshotGallery({ app }) {
+  const [imageErrors, setImageErrors] = React__default.useState(() => /* @__PURE__ */ new Set());
+  const screenshotIds = app.screenshotIds || [];
+  if (screenshotIds.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "w-full h-96 bg-muted/30 rounded-lg flex items-center justify-center text-muted-foreground", children: "No screenshots available" });
+  }
+  const handleImageError = (id) => {
+    setImageErrors((prev) => /* @__PURE__ */ new Set([...prev, id]));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: screenshotIds.map((screenshotId, index) => {
+    const screenshotUrl = `${"/"}/api/screenshots/${screenshotId}`;
+    const hasError = imageErrors.has(screenshotId);
+    if (hasError) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full rounded-lg overflow-hidden bg-muted/30",
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: screenshotUrl,
+            alt: `${app.displayName} screenshot ${index + 1}`,
+            className: "w-full h-auto object-contain max-h-[600px]",
+            onError: () => handleImageError(screenshotId)
+          }
+        )
+      },
+      screenshotId
+    );
+  }) });
+}
+function AccessSection({ app }) {
+  const { access } = app;
+  if (!access) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Access Method" }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "Contact administrator" })
+    ] });
+  }
+  const getAccessLabel = () => {
+    switch (access.type) {
+      case "self-service":
+        return "Self-service access";
+      case "ticketing":
+        return "Access via ticketing";
+      case "bot":
+        return "Bot-based access";
+      case "email":
+        return "Email for access";
+      case "documentation":
+        return "See documentation";
+      case "manual":
+        return "Manual access";
+      default:
+        return "Access available";
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Access Method" }),
+    /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: getAccessLabel() }),
+    access.type === "documentation" && "url" in access && typeof access.url === "string" && /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: access.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "text-sm text-primary hover:underline inline-flex items-center gap-1",
+        children: [
+          "View documentation",
+          /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+        ]
+      }
+    )
+  ] });
+}
+function AppDetailModal({ app, isOpen, onClose }) {
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full flex items-center justify-center p-4 sm:p-8 lg:p-16", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "absolute top-6 right-6 z-10 size-10 rounded-full bg-background/80 backdrop-blur hover:bg-background",
+            onClick: onClose,
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "size-5" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full max-w-5xl", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("div", { className: "bg-background rounded-lg shadow-2xl border border-border p-8 space-y-8", children: [
+          /* @__PURE__ */ jsx(ScreenshotGallery, { app }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+              /* @__PURE__ */ jsx(AppIcon, { app }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold", children: app.displayName }),
+                app.appUrl && /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: app.appUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "inline-flex items-center gap-2 text-sm text-primary hover:underline",
+                    children: [
+                      "Visit application",
+                      /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" })
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            app.description && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Description" }),
+              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: app.description })
+            ] }),
+            /* @__PURE__ */ jsx(AccessSection, { app }),
+            app.tags && app.tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "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", children: tag }, tag)) })
+            ] }),
+            app.teams && app.teams.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "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", children: team }, team)) })
+            ] }),
+            app.links && app.links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Related Links" }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: app.links.map((link) => /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: link.url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "flex text-sm text-primary hover:underline items-center gap-1",
+                  children: [
+                    link.title || link.url,
+                    /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+                  ]
+                },
+                link.url
+              )) })
+            ] }),
+            app.notes && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: "Notes" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: app.notes })
+            ] })
+          ] })
+        ] }) })
+      ] })
+    }
+  );
+}
+export {
+  AppDetailModal
+};
+//# sourceMappingURL=AppDetailModal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppDetailModal.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AppDetailModal.tsx"],"sourcesContent":["import type { AppForCatalog } from '@env-hopper/backend-core'\nimport { AppWindow, ExternalLink, X } from 'lucide-react'\nimport React, { useEffect } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Button } from '~/ui/button'\nimport { ScrollArea } from '~/ui/scroll-area'\nimport { Separator } from '~/ui/separator'\n\nexport interface AppDetailModalProps {\n  app: AppForCatalog\n  isOpen: boolean\n  onClose: () => 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/by-name/${iconName}`\n}\n\nfunction AppIcon({ app }: { app: AppForCatalog }) {\n  const [imageError, setImageError] = React.useState(false)\n\n  if (app.iconName && !imageError) {\n    return (\n      <img\n        src={getIconUrl(app.iconName)}\n        alt={`${app.displayName} icon`}\n        className=\"size-16 rounded-lg object-contain\"\n        onError={() => setImageError(true)}\n      />\n    )\n  }\n\n  return (\n    <div className=\"flex items-center justify-center rounded-lg bg-primary/10 text-primary size-16\">\n      <AppWindow className=\"size-8\" />\n    </div>\n  )\n}\n\nfunction ScreenshotGallery({ app }: { app: AppForCatalog }) {\n  const [imageErrors, setImageErrors] = React.useState<Set<string>>(() => new Set())\n\n  const screenshotIds = app.screenshotIds || []\n  \n  if (screenshotIds.length === 0) {\n    return (\n      <div className=\"w-full h-96 bg-muted/30 rounded-lg flex items-center justify-center text-muted-foreground\">\n        No screenshots available\n      </div>\n    )\n  }\n\n  const handleImageError = (id: string) => {\n    setImageErrors((prev) => new Set([...prev, id]))\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {screenshotIds.map((screenshotId, index) => {\n        const screenshotUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'}/api/screenshots/${screenshotId}`\n        const hasError = imageErrors.has(screenshotId)\n\n        if (hasError) {\n          return null\n        }\n\n        return (\n          <div\n            key={screenshotId}\n            className=\"w-full rounded-lg overflow-hidden bg-muted/30\"\n          >\n            <img\n              src={screenshotUrl}\n              alt={`${app.displayName} screenshot ${index + 1}`}\n              className=\"w-full h-auto object-contain max-h-[600px]\"\n              onError={() => handleImageError(screenshotId)}\n            />\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nfunction AccessSection({ app }: { app: AppForCatalog }) {\n  const { access } = app\n\n  if (!access) {\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"text-sm font-medium\">Access Method</div>\n        <div className=\"text-sm text-muted-foreground\">Contact administrator</div>\n      </div>\n    )\n  }\n\n  const getAccessLabel = () => {\n    switch (access.type) {\n      case 'self-service':\n        return 'Self-service access'\n      case 'ticketing':\n        return 'Access via ticketing'\n      case 'bot':\n        return 'Bot-based access'\n      case 'email':\n        return 'Email for access'\n      case 'documentation':\n        return 'See documentation'\n      case 'manual':\n        return 'Manual access'\n      default:\n        return 'Access available'\n    }\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"text-sm font-medium\">Access Method</div>\n      <div className=\"text-sm text-muted-foreground\">{getAccessLabel()}</div>\n      {access.type === 'documentation' && 'url' in access && typeof access.url === 'string' && (\n        <a\n          href={access.url}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"text-sm text-primary hover:underline inline-flex items-center gap-1\"\n        >\n          View documentation\n          <ExternalLink className=\"size-3\" />\n        </a>\n      )}\n    </div>\n  )\n}\n\nexport function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps) {\n  // Close on Escape key\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose()\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape)\n      // Prevent body scroll when modal is open\n      document.body.style.overflow = 'hidden'\n    }\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape)\n      document.body.style.overflow = ''\n    }\n  }, [isOpen, onClose])\n\n  if (!isOpen) {\n    return null\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm\"\n      onClick={onClose}\n    >\n      {/* Modal Container with wide borders */}\n      <div className=\"relative h-full w-full flex items-center justify-center p-4 sm:p-8 lg:p-16\">\n        {/* Close Button */}\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute top-6 right-6 z-10 size-10 rounded-full bg-background/80 backdrop-blur hover:bg-background\"\n          onClick={onClose}\n        >\n          <X className=\"size-5\" />\n          <span className=\"sr-only\">Close</span>\n        </Button>\n\n        {/* Scrollable Content */}\n        <ScrollArea className=\"h-full w-full max-w-5xl\" onClick={(e) => e.stopPropagation()}>\n          <div className=\"bg-background rounded-lg shadow-2xl border border-border p-8 space-y-8\">\n            {/* Screenshots Section */}\n            <ScreenshotGallery app={app} />\n\n            <Separator />\n\n            {/* App Details Section */}\n            <div className=\"space-y-6\">\n              {/* Header with Icon and Title */}\n              <div className=\"flex items-start gap-4\">\n                <AppIcon app={app} />\n                <div className=\"flex-1 space-y-2\">\n                  <h2 className=\"text-3xl font-bold\">{app.displayName}</h2>\n                  {app.appUrl && (\n                    <a\n                      href={app.appUrl}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"inline-flex items-center gap-2 text-sm text-primary hover:underline\"\n                    >\n                      Visit application\n                      <ExternalLink className=\"size-4\" />\n                    </a>\n                  )}\n                </div>\n              </div>\n\n              {/* Description */}\n              {app.description && (\n                <div className=\"space-y-2\">\n                  <div className=\"text-sm font-medium\">Description</div>\n                  <p className=\"text-muted-foreground\">{app.description}</p>\n                </div>\n              )}\n\n              {/* Access Section */}\n              <AccessSection app={app} />\n\n              {/* Tags */}\n              {app.tags && app.tags.length > 0 && (\n                <div className=\"space-y-2\">\n                  <div className=\"text-sm font-medium\">Tags</div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {app.tags.map((tag) => (\n                      <Badge key={tag} variant=\"secondary\">\n                        {tag}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {/* Teams */}\n              {app.teams && app.teams.length > 0 && (\n                <div className=\"space-y-2\">\n                  <div className=\"text-sm font-medium\">Teams</div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {app.teams.map((team) => (\n                      <Badge key={team} variant=\"outline\">\n                        {team}\n                      </Badge>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {/* Links */}\n              {app.links && app.links.length > 0 && (\n                <div className=\"space-y-2\">\n                  <div className=\"text-sm font-medium\">Related Links</div>\n                  <div className=\"space-y-1\">\n                    {app.links.map((link) => (\n                      <a\n                        key={link.url}\n                        href={link.url}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        className=\"flex text-sm text-primary hover:underline items-center gap-1\"\n                      >\n                        {link.title || link.url}\n                        <ExternalLink className=\"size-3\" />\n                      </a>\n                    ))}\n                  </div>\n                </div>\n              )}\n\n              {/* Notes */}\n              {app.notes && (\n                <div className=\"space-y-2\">\n                  <div className=\"text-sm font-medium\">Notes</div>\n                  <p className=\"text-sm text-muted-foreground whitespace-pre-wrap\">\n                    {app.notes}\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        </ScrollArea>\n      </div>\n    </div>\n  )\n}\n"],"names":["React"],"mappings":"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"}

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,6 @@
+import { AppForCatalog } from '@env-hopper/backend-core';
+export interface AppCatalogGridProps {
+    apps: Array<AppForCatalog>;
+    onAppClick?: (app: AppForCatalog) => void;
+}
+export declare function AppCatalogGrid({ apps, onAppClick }: AppCatalogGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink, AppWindow } from "lucide-react";
+import React__default from "react";
+import { cn } from "../../../../lib/utils.js";
+import { Badge } from "../../../../ui/badge.js";
+import { Card, CardContent } from "../../../../ui/card.js";
+function getIconUrl(iconName) {
+  const baseUrl = "/";
+  return `${baseUrl}/api/icons/by-name/${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 AppCard({ app, onClick }) {
+  var _a, _b, _c;
+  const hasUrl = app.appUrl;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: "group hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 flex flex-col h-full cursor-pointer hover:border-primary/50",
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-full shrink-0", children: /* @__PURE__ */ jsx(AppScreenshot, { app }) }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "p-6 flex flex-col gap-3 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(AppIcon, { app }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-semibold text-base leading-tight mb-1", children: app.displayName || "Unnamed App" }),
+              hasUrl && /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  href: app.appUrl,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-xs text-muted-foreground hover:text-primary inline-flex items-center gap-1",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    "Visit app",
+                    /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          app.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground line-clamp-3", children: app.description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5 mt-auto", children: [
+            (_a = app.tags) == null ? void 0 : _a.slice(0, 3).map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)),
+            (((_b = app.tags) == null ? void 0 : _b.length) || 0) > 3 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: "text-xs", children: [
+              "+",
+              (((_c = app.tags) == null ? void 0 : _c.length) || 0) - 3
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function AppCatalogGrid({ apps, onAppClick }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: apps.map((app) => /* @__PURE__ */ jsx(AppCard, { app, onClick: () => onAppClick == null ? void 0 : onAppClick(app) }, app.id)) });
+}
+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 } from 'lucide-react'\nimport React from 'react'\n\nimport type { AppForCatalog } from '@env-hopper/backend-core'\n\nimport { cn } from '~/lib/utils'\nimport { Badge } from '~/ui/badge'\nimport { Card, CardContent } from '~/ui/card'\n\nexport interface AppCatalogGridProps {\n  apps: Array<AppForCatalog>\n  onAppClick?: (app: AppForCatalog) => 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/by-name/${iconName}`\n}\n\nfunction AppIcon({ app, className }: { app: AppForCatalog; className?: string }) {\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 AppCard({ app, onClick }: { app: AppForCatalog; onClick?: () => void }) {\n  const hasUrl = app.appUrl\n\n  return (\n    <Card\n      className=\"group hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 flex flex-col h-full cursor-pointer hover:border-primary/50\"\n      onClick={onClick}\n    >\n      {/* Screenshot Section */}\n      <div className=\"w-full shrink-0\">\n        <AppScreenshot app={app} />\n      </div>\n\n      <CardContent className=\"p-6 flex flex-col gap-3 flex-1\">\n        {/* Icon and Title Row */}\n        <div className=\"flex items-start gap-3\">\n          <AppIcon app={app} />\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"font-semibold text-base leading-tight mb-1\">\n              {app.displayName || 'Unnamed App'}\n            </div>\n            {hasUrl && (\n              <a\n                href={app.appUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                className=\"text-xs text-muted-foreground hover:text-primary inline-flex items-center gap-1\"\n                onClick={(e) => e.stopPropagation()}\n              >\n                Visit app\n                <ExternalLink className=\"size-3\" />\n              </a>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {app.description && (\n          <p className=\"text-sm text-muted-foreground line-clamp-3\">\n            {app.description}\n          </p>\n        )}\n\n        {/* Tags/Teams */}\n        <div className=\"flex flex-wrap gap-1.5 mt-auto\">\n          {app.tags?.slice(0, 3).map((tag) => (\n            <Badge key={tag} variant=\"secondary\" className=\"text-xs\">\n              {tag}\n            </Badge>\n          ))}\n          {(app.tags?.length || 0) > 3 && (\n            <Badge variant=\"outline\" className=\"text-xs\">\n              +{(app.tags?.length || 0) - 3}\n            </Badge>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport function AppCatalogGrid({ apps, onAppClick }: AppCatalogGridProps) {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n      {apps.map((app) => (\n        <AppCard key={app.id} app={app} onClick={() => onAppClick?.(app)} />\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,3 @@
+import { AppForCatalog } from '@env-hopper/backend-core';
+export declare function getAppUrl(app: AppForCatalog): string;
+export declare function getAppAccessInstructions(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,68 @@
+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 { AppDetailModal } from "../components/AppDetailModal.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 } = useAppCatalogContext();
+  const [searchValue, setSearchValue] = useState("");
+  const filteredApps = useMemo(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+    if (!normalizedSearchValue) {
+      return apps;
+    }
+    return apps.filter((app) => {
+      var _a, _b;
+      const name = app.displayName.toLowerCase() || "";
+      const description = ((_a = app.description) == null ? void 0 : _a.toLowerCase()) || "";
+      const id = app.id.toLowerCase() || "";
+      const tags = ((_b = app.tags) == null ? void 0 : _b.join(" ").toLowerCase()) || "";
+      return name.includes(normalizedSearchValue) || description.includes(normalizedSearchValue) || id.includes(normalizedSearchValue) || tags.includes(normalizedSearchValue);
+    });
+  }, [apps, searchValue]);
+  const handleAppClick = (app) => {
+    if (app.slug) {
+      const currentPath = router.state.location.pathname;
+      navigate({ to: currentPath, search: { app: app.slug } });
+    }
+  };
+  const handleCloseModal = () => {
+    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 selectedAppSlug = search.app;
+  const selectedApp = selectedAppSlug ? apps.find((a) => a.slug === selectedAppSlug) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "py-6 flex flex-col gap-4 w-full max-w-7xl", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-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(AppCatalogGrid, { apps: filteredApps, onAppClick: handleAppClick }),
+    selectedApp && /* @__PURE__ */ jsx(AppDetailModal, { app: selectedApp, isOpen: true, onClose: handleCloseModal })
+  ] });
+}
+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 { useMemo, useState } from 'react'\n\nimport type { AppForCatalog } from '@env-hopper/backend-core'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { AppDetailModal } from '../components/AppDetailModal'\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 } = useAppCatalogContext()\n  const [searchValue, setSearchValue] = useState('')\n\n  const filteredApps = useMemo(() => {\n    const normalizedSearchValue = searchValue.trim().toLowerCase()\n    if (!normalizedSearchValue) {\n      return apps\n    }\n\n    return apps.filter((app) => {\n      const name = app.displayName.toLowerCase() || ''\n      const description = app.description?.toLowerCase() || ''\n      const id = app.id.toLowerCase() || ''\n      const tags = app.tags?.join(' ').toLowerCase() || ''\n\n      return (\n        name.includes(normalizedSearchValue) ||\n        description.includes(normalizedSearchValue) ||\n        id.includes(normalizedSearchValue) ||\n        tags.includes(normalizedSearchValue)\n      )\n    })\n  }, [apps, searchValue])\n\n  const handleAppClick = (app: AppForCatalog) => {\n    if (app.slug) {\n      const currentPath = router.state.location.pathname\n      navigate({ to: currentPath, search: { app: app.slug } })\n    }\n  }\n\n  const handleCloseModal = () => {\n    const currentPath = router.state.location.pathname\n    const { app: _app, ...restSearch } = search\n    navigate({ to: currentPath, search: restSearch })\n  }\n\n  if (isLoadingApps) {\n    return <div className=\"py-6 text-muted-foreground\">Loading…</div>\n  }\n\n  const selectedAppSlug = search.app\n  const selectedApp = selectedAppSlug ? apps.find((a) => a.slug === selectedAppSlug) : null\n\n  return (\n    <div className=\"py-6 flex flex-col gap-4 w-full max-w-7xl\">\n      <div className=\"flex items-start justify-between gap-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\n      <AppCatalogGrid apps={filteredApps} onAppClick={handleAppClick} />\n\n      {selectedApp && (\n        <AppDetailModal app={selectedApp} isOpen={true} onClose={handleCloseModal} />\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAUO,SAAS,iBAAiB;AAC/B,QAAM,WAAW,YAAA;AACjB,QAAM,SAAS,UAAA;AACf,QAAM,SAAS,UAAU,EAAE,QAAQ,OAAO;AAC1C,QAAM,EAAE,MAAM,cAAA,IAAkB,qBAAA;AAChC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,wBAAwB,YAAY,KAAA,EAAO,YAAA;AACjD,QAAI,CAAC,uBAAuB;AAC1B,aAAO;AAAA,IACT;AAEA,WAAO,KAAK,OAAO,CAAC,QAAQ;;AAC1B,YAAM,OAAO,IAAI,YAAY,YAAA,KAAiB;AAC9C,YAAM,gBAAc,SAAI,gBAAJ,mBAAiB,kBAAiB;AACtD,YAAM,KAAK,IAAI,GAAG,YAAA,KAAiB;AACnC,YAAM,SAAO,SAAI,SAAJ,mBAAU,KAAK,KAAK,kBAAiB;AAElD,aACE,KAAK,SAAS,qBAAqB,KACnC,YAAY,SAAS,qBAAqB,KAC1C,GAAG,SAAS,qBAAqB,KACjC,KAAK,SAAS,qBAAqB;AAAA,IAEvC,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,WAAW,CAAC;AAEtB,QAAM,iBAAiB,CAAC,QAAuB;AAC7C,QAAI,IAAI,MAAM;AACZ,YAAM,cAAc,OAAO,MAAM,SAAS;AAC1C,eAAS,EAAE,IAAI,aAAa,QAAQ,EAAE,KAAK,IAAI,KAAA,GAAQ;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,UAAM,cAAc,OAAO,MAAM,SAAS;AAC1C,UAAM,EAAE,KAAK,MAAM,GAAG,eAAe;AACrC,aAAS,EAAE,IAAI,aAAa,QAAQ,YAAY;AAAA,EAClD;AAEA,MAAI,eAAe;AACjB,WAAO,oBAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,YAAQ;AAAA,EAC7D;AAEA,QAAM,kBAAkB,OAAO;AAC/B,QAAM,cAAc,kBAAkB,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,eAAe,IAAI;AAErF,SACE,qBAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,0CACb,UAAA,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,eAAW;AAAA,MACjD,qBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA;AAAA,QAAA,aAAa;AAAA,QAAO;AAAA,MAAA,EAAA,CACvB;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IAEA,oBAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,eAAe,EAAE,OAAO,KAAK;AAAA,QAC9C,aAAY;AAAA,QACZ,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEA,oBAAC,gBAAA,EAAe,MAAM,cAAc,YAAY,gBAAgB;AAAA,IAE/D,mCACE,gBAAA,EAAe,KAAK,aAAa,QAAQ,MAAM,SAAS,iBAAA,CAAkB;AAAA,EAAA,GAE/E;AAEJ;"}

package/dist/esm/modules/auth/AuthContext.d.ts

@@ -0,0 +1,38 @@
+import { Session } from 'better-auth/types';
+interface User {
+    id: string;
+    email?: string | null;
+    name?: string | null;
+    image?: string | null;
+    emailVerified?: boolean;
+}
+interface AuthContextType {
+    session: Session | null;
+    user: User | null;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+}
+/**
+ * Provider component for authentication state
+ * Fetches and manages session from the backend
+ * Uses localStorage for optimistic rendering to avoid flickering
+ */
+export declare function AuthProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access authentication state
+ * @returns Authentication context containing session, user, and auth state
+ */
+export declare function useAuth(): AuthContextType;
+/**
+ * Hook to check if user is authenticated
+ * @returns Boolean indicating if user is authenticated
+ */
+export declare function useIsAuthenticated(): boolean;
+/**
+ * Hook to get the current user
+ * @returns Current user or null
+ */
+export declare function useUser(): User | null;
+export {};