@igstack/app-catalog-frontend-core 0.4.0 → 0.6.0

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useNavigate } from "@tanstack/react-router";
 import { X } from "lucide-react";
 import { useDeferredValue, useState, useEffect, useMemo } from "react";
 import { Button } from "../../../../ui/button.js";
@@ -6,20 +7,19 @@ import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyCont
 import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
 import { useAppClickHistory } from "../../hooks/useAppClickHistory.js";
 import { useAppCounts } from "../../hooks/useAppCounts.js";
-import { useUrlSyncedState } from "../../hooks/useUrlSyncedState.js";
 import { searchResources } from "../../utils/searchApps.js";
 import { OnboardingCard } from "../components/OnboardingCard.js";
 import { useAppCatalogFilters } from "../context/AppCatalogFiltersContext.js";
 import { FilterBar } from "../filters/FilterBar.js";
 import { AppCatalogGrid } from "../grid/AppCatalogGrid.js";
-function AppCatalogPage() {
+function AppCatalogPage({
+  selectedSlug
+} = {}) {
   const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext();
   const { state: filterState, actions } = useAppCatalogFilters();
   const { getTopApps } = useAppClickHistory();
-  const [selectedAppSlug, setSelectedAppSlug] = useUrlSyncedState({
-    key: "app",
-    defaultValue: void 0
-  });
+  const navigate = useNavigate();
+  const selectedAppSlug = selectedSlug;
   const searchValue = filterState.searchValue;
   const setSearchValue = actions.setSearchValue;
   const deferredSearchValue = useDeferredValue(searchValue);
@@ -72,17 +72,21 @@ function AppCatalogPage() {
     searchValue: deferredSearchValue
   });
   useEffect(() => {
-    if (filteredApps.length === 1 && filteredApps[0]) {
-      setSelectedAppSlug(filteredApps[0].slug);
+    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {
+      void navigate({
+        to: "/app/$slug",
+        params: { slug: filteredApps[0].slug },
+        replace: true
+      });
     }
-  }, [filteredApps, setSelectedAppSlug]);
+  }, [filteredApps, selectedAppSlug, navigate]);
   const handleAppClick = (app) => {
-    setSelectedAppSlug(app.slug);
+    void navigate({ to: "/app/$slug", params: { slug: app.slug } });
   };
   const handleClearFilters = () => {
     setSearchValue("");
     actions.clearAllFilters();
-    setSelectedAppSlug(void 0);
+    void navigate({ to: "/" });
   };
   const totalAppsCount = useMemo(() => {
     let count = rootResources.length;
@@ -121,7 +125,7 @@ function AppCatalogPage() {
           variant: "outline",
           onClick: () => {
             setSearchValue("");
-            setSelectedAppSlug(void 0);
+            void navigate({ to: "/" });
           },
           className: "gap-2",
           children: [
@@ -137,6 +141,7 @@ function AppCatalogPage() {
         selectedAppSlug,
         groupingDefinition,
         onAppClick: handleAppClick,
+        onClosePanel: () => void navigate({ to: "/" }),
         hasSearch: !!deferredSearchValue,
         searchQuery: deferredSearchValue,
         totalAppsCount,

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

@@ -1 +1 @@
-{"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { X } from 'lucide-react'\nimport { useDeferredValue, useEffect, useMemo, useState } from 'react'\nimport { Button } from '~/ui/button'\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from '~/ui/empty'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { useAppCounts } from '../../hooks/useAppCounts'\nimport { useUrlSyncedState } from '../../hooks/useUrlSyncedState'\nimport { searchResources } from '../../utils/searchApps'\nimport { OnboardingCard } from '../components/OnboardingCard'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { FilterBar } from '../filters/FilterBar'\nimport { AppCatalogGrid } from '../grid/AppCatalogGrid'\n\nexport function AppCatalogPage() {\n  const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()\n  const { state: filterState, actions } = useAppCatalogFilters()\n  const { getTopApps } = useAppClickHistory()\n\n  // URL-synced state\n  const [selectedAppSlug, setSelectedAppSlug] = useUrlSyncedState<\n    string | undefined\n  >({\n    key: 'app',\n    defaultValue: undefined,\n  })\n\n  // Search value from context (URL-synced in AppCatalogFiltersContext)\n  const searchValue = filterState.searchValue\n  const setSearchValue = actions.setSearchValue\n\n  // Defer the search value used for filtering to avoid blocking the input\n  const deferredSearchValue = useDeferredValue(searchValue)\n\n  // State for top apps (loaded async)\n  const [topAppSlugs, setTopAppSlugs] = useState<string[]>([])\n\n  // Load top apps on mount to calculate recent count\n  useEffect(() => {\n    void getTopApps(10).then(setTopAppSlugs)\n  }, [getTopApps])\n\n  // Get root resources for filtering (children handled internally by searchResources)\n  const rootResources = useMemo(\n    () => resources.filter((r) => !r.parentSlug),\n    [resources],\n  )\n\n  const filteredApps = useMemo(() => {\n    let result = rootResources\n\n    // Step 1: Filter deprecated apps (if not showing them)\n    if (!filterState.showDeprecated) {\n      result = result.filter((app) => !app.deprecated)\n    }\n\n    // Step 2: Apply recent mode or tag filters\n    if (filterState.recentMode) {\n      // Filter to top 10 most clicked apps\n      result = result.filter((app) => topAppSlugs.includes(app.slug))\n    } else if (Object.keys(filterState.tagFilters).length > 0) {\n      // Apply tag filters (AND condition)\n      result = result.filter((app) => {\n        return Object.entries(filterState.tagFilters).every(\n          ([prefix, value]) => {\n            const fullTag = `${prefix}:${value}`\n            return app.tags?.some(\n              (tag) => tag.toLowerCase() === fullTag.toLowerCase(),\n            )\n          },\n        )\n      })\n    }\n\n    // Step 3: Apply search (using deferred value)\n    // Pass all resources so children contribute to parent scoring\n    const childResources = resources.filter((r) => r.parentSlug)\n    result = searchResources(\n      [...result, ...childResources],\n      deferredSearchValue,\n    )\n\n    return result\n  }, [\n    rootResources,\n    resources,\n    deferredSearchValue,\n    filterState.recentMode,\n    filterState.tagFilters,\n    filterState.showDeprecated,\n    topAppSlugs,\n  ])\n\n  // Calculate counts for FilterBar\n  const { allCount, recentCount, deprecatedCount } = useAppCounts({\n    apps: rootResources,\n    topAppSlugs,\n    searchValue: deferredSearchValue,\n  })\n\n  // Auto-open details when only 1 result\n  useEffect(() => {\n    if (filteredApps.length === 1 && filteredApps[0]) {\n      setSelectedAppSlug(filteredApps[0].slug)\n    }\n  }, [filteredApps, setSelectedAppSlug])\n\n  const handleAppClick = (app: Resource) => {\n    setSelectedAppSlug(app.slug)\n  }\n\n  const handleClearFilters = () => {\n    setSearchValue('')\n    actions.clearAllFilters()\n    setSelectedAppSlug(undefined)\n  }\n\n  // Calculate total apps count (respecting showDeprecated setting)\n  const totalAppsCount = useMemo(() => {\n    let count = rootResources.length\n    if (!filterState.showDeprecated) {\n      count = rootResources.filter((app) => !app.deprecated).length\n    }\n    return count\n  }, [rootResources, filterState.showDeprecated])\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=\"shrink-0\">\n        <OnboardingCard />\n      </div>\n\n      <div className=\"shrink-0\">\n        <FilterBar\n          totalCount={allCount}\n          recentCount={recentCount}\n          deprecatedCount={deprecatedCount}\n          apps={rootResources}\n        />\n      </div>\n\n      <div className=\"flex-1 min-h-0\">\n        {filteredApps.length === 0 ? (\n          <Empty>\n            <EmptyHeader>\n              <EmptyMedia variant=\"icon\">\n                <X className=\"h-6 w-6\" />\n              </EmptyMedia>\n              <EmptyTitle>\n                No apps found{searchValue && ` for \"${searchValue}\"`}\n              </EmptyTitle>\n              <EmptyDescription>\n                Try adjusting your search or filters\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              {searchValue && (\n                <Button\n                  variant=\"outline\"\n                  onClick={() => {\n                    setSearchValue('')\n                    setSelectedAppSlug(undefined)\n                  }}\n                  className=\"gap-2\"\n                >\n                  <X className=\"h-4 w-4\" />\n                  Clear search\n                </Button>\n              )}\n            </EmptyContent>\n          </Empty>\n        ) : (\n          <AppCatalogGrid\n            apps={filteredApps}\n            selectedAppSlug={selectedAppSlug}\n            groupingDefinition={groupingDefinition}\n            onAppClick={handleAppClick}\n            hasSearch={!!deferredSearchValue}\n            searchQuery={deferredSearchValue}\n            totalAppsCount={totalAppsCount}\n            onClearFilters={handleClearFilters}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,SAAS,iBAAiB;AAC/B,QAAM,EAAE,WAAW,eAAe,gBAAA,IAAoB,qBAAA;AACtD,QAAM,EAAE,OAAO,aAAa,QAAA,IAAY,qBAAA;AACxC,QAAM,EAAE,WAAA,IAAe,mBAAA;AAGvB,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,kBAE5C;AAAA,IACA,KAAK;AAAA,IACL,cAAc;AAAA,EAAA,CACf;AAGD,QAAM,cAAc,YAAY;AAChC,QAAM,iBAAiB,QAAQ;AAG/B,QAAM,sBAAsB,iBAAiB,WAAW;AAGxD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAmB,CAAA,CAAE;AAG3D,YAAU,MAAM;AACd,SAAK,WAAW,EAAE,EAAE,KAAK,cAAc;AAAA,EACzC,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,gBAAgB;AAAA,IACpB,MAAM,UAAU,OAAO,CAAC,MAAM,CAAC,EAAE,UAAU;AAAA,IAC3C,CAAC,SAAS;AAAA,EAAA;AAGZ,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,SAAS;AAGb,QAAI,CAAC,YAAY,gBAAgB;AAC/B,eAAS,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,UAAU;AAAA,IACjD;AAGA,QAAI,YAAY,YAAY;AAE1B,eAAS,OAAO,OAAO,CAAC,QAAQ,YAAY,SAAS,IAAI,IAAI,CAAC;AAAA,IAChE,WAAW,OAAO,KAAK,YAAY,UAAU,EAAE,SAAS,GAAG;AAEzD,eAAS,OAAO,OAAO,CAAC,QAAQ;AAC9B,eAAO,OAAO,QAAQ,YAAY,UAAU,EAAE;AAAA,UAC5C,CAAC,CAAC,QAAQ,KAAK,MAAM;;AACnB,kBAAM,UAAU,GAAG,MAAM,IAAI,KAAK;AAClC,oBAAO,SAAI,SAAJ,mBAAU;AAAA,cACf,CAAC,QAAQ,IAAI,YAAA,MAAkB,QAAQ,YAAA;AAAA;AAAA,UAE3C;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH;AAIA,UAAM,iBAAiB,UAAU,OAAO,CAAC,MAAM,EAAE,UAAU;AAC3D,aAAS;AAAA,MACP,CAAC,GAAG,QAAQ,GAAG,cAAc;AAAA,MAC7B;AAAA,IAAA;AAGF,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,EAAA,CACD;AAGD,QAAM,EAAE,UAAU,aAAa,gBAAA,IAAoB,aAAa;AAAA,IAC9D,MAAM;AAAA,IACN;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAGD,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,KAAK,aAAa,CAAC,GAAG;AAChD,yBAAmB,aAAa,CAAC,EAAE,IAAI;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,cAAc,kBAAkB,CAAC;AAErC,QAAM,iBAAiB,CAAC,QAAkB;AACxC,uBAAmB,IAAI,IAAI;AAAA,EAC7B;AAEA,QAAM,qBAAqB,MAAM;AAC/B,mBAAe,EAAE;AACjB,YAAQ,gBAAA;AACR,uBAAmB,MAAS;AAAA,EAC9B;AAGA,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,QAAQ,cAAc;AAC1B,QAAI,CAAC,YAAY,gBAAgB;AAC/B,cAAQ,cAAc,OAAO,CAAC,QAAQ,CAAC,IAAI,UAAU,EAAE;AAAA,IACzD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,YAAY,cAAc,CAAC;AAE9C,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,oBAAC,OAAA,EAAI,WAAU,YACb,UAAA,oBAAC,kBAAe,GAClB;AAAA,IAEA,oBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,IAEA,oBAAC,SAAI,WAAU,kBACZ,uBAAa,WAAW,yBACtB,OAAA,EACC,UAAA;AAAA,MAAA,qBAAC,aAAA,EACC,UAAA;AAAA,QAAA,oBAAC,cAAW,SAAQ,QAClB,8BAAC,GAAA,EAAE,WAAU,WAAU,EAAA,CACzB;AAAA,6BACC,YAAA,EAAW,UAAA;AAAA,UAAA;AAAA,UACI,eAAe,SAAS,WAAW;AAAA,QAAA,GACnD;AAAA,QACA,oBAAC,oBAAiB,UAAA,uCAAA,CAElB;AAAA,MAAA,GACF;AAAA,MACA,oBAAC,gBACE,UAAA,eACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,2BAAe,EAAE;AACjB,+BAAmB,MAAS;AAAA,UAC9B;AAAA,UACA,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,YAAE;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EAE3B,CAEJ;AAAA,IAAA,EAAA,CACF,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,WAAW,CAAC,CAAC;AAAA,QACb,aAAa;AAAA,QACb;AAAA,QACA,gBAAgB;AAAA,MAAA;AAAA,IAAA,EAClB,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { useNavigate } from '@tanstack/react-router'\nimport { X } from 'lucide-react'\nimport { useDeferredValue, useEffect, useMemo, useState } from 'react'\nimport { Button } from '~/ui/button'\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from '~/ui/empty'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppClickHistory } from '../../hooks/useAppClickHistory'\nimport { useAppCounts } from '../../hooks/useAppCounts'\nimport { searchResources } from '../../utils/searchApps'\nimport { OnboardingCard } from '../components/OnboardingCard'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { FilterBar } from '../filters/FilterBar'\nimport { AppCatalogGrid } from '../grid/AppCatalogGrid'\n\nexport function AppCatalogPage({\n  selectedSlug,\n}: { selectedSlug?: string } = {}) {\n  const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()\n  const { state: filterState, actions } = useAppCatalogFilters()\n  const { getTopApps } = useAppClickHistory()\n  const navigate = useNavigate()\n\n  // Selected app comes from the route path (/app/<slug>); undefined = nothing open\n  const selectedAppSlug = selectedSlug\n\n  // Search value from context (URL-synced in AppCatalogFiltersContext)\n  const searchValue = filterState.searchValue\n  const setSearchValue = actions.setSearchValue\n\n  // Defer the search value used for filtering to avoid blocking the input\n  const deferredSearchValue = useDeferredValue(searchValue)\n\n  // State for top apps (loaded async)\n  const [topAppSlugs, setTopAppSlugs] = useState<string[]>([])\n\n  // Load top apps on mount to calculate recent count\n  useEffect(() => {\n    void getTopApps(10).then(setTopAppSlugs)\n  }, [getTopApps])\n\n  // Get root resources for filtering (children handled internally by searchResources)\n  const rootResources = useMemo(\n    () => resources.filter((r) => !r.parentSlug),\n    [resources],\n  )\n\n  const filteredApps = useMemo(() => {\n    let result = rootResources\n\n    // Step 1: Filter deprecated apps (if not showing them)\n    if (!filterState.showDeprecated) {\n      result = result.filter((app) => !app.deprecated)\n    }\n\n    // Step 2: Apply recent mode or tag filters\n    if (filterState.recentMode) {\n      // Filter to top 10 most clicked apps\n      result = result.filter((app) => topAppSlugs.includes(app.slug))\n    } else if (Object.keys(filterState.tagFilters).length > 0) {\n      // Apply tag filters (AND condition)\n      result = result.filter((app) => {\n        return Object.entries(filterState.tagFilters).every(\n          ([prefix, value]) => {\n            const fullTag = `${prefix}:${value}`\n            return app.tags?.some(\n              (tag) => tag.toLowerCase() === fullTag.toLowerCase(),\n            )\n          },\n        )\n      })\n    }\n\n    // Step 3: Apply search (using deferred value)\n    // Pass all resources so children contribute to parent scoring\n    const childResources = resources.filter((r) => r.parentSlug)\n    result = searchResources(\n      [...result, ...childResources],\n      deferredSearchValue,\n    )\n\n    return result\n  }, [\n    rootResources,\n    resources,\n    deferredSearchValue,\n    filterState.recentMode,\n    filterState.tagFilters,\n    filterState.showDeprecated,\n    topAppSlugs,\n  ])\n\n  // Calculate counts for FilterBar\n  const { allCount, recentCount, deprecatedCount } = useAppCounts({\n    apps: rootResources,\n    topAppSlugs,\n    searchValue: deferredSearchValue,\n  })\n\n  // Auto-open details when only 1 result\n  useEffect(() => {\n    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {\n      void navigate({\n        to: '/app/$slug',\n        params: { slug: filteredApps[0].slug },\n        replace: true,\n      })\n    }\n  }, [filteredApps, selectedAppSlug, navigate])\n\n  const handleAppClick = (app: Resource) => {\n    void navigate({ to: '/app/$slug', params: { slug: app.slug } })\n  }\n\n  const handleClearFilters = () => {\n    setSearchValue('')\n    actions.clearAllFilters()\n    void navigate({ to: '/' })\n  }\n\n  // Calculate total apps count (respecting showDeprecated setting)\n  const totalAppsCount = useMemo(() => {\n    let count = rootResources.length\n    if (!filterState.showDeprecated) {\n      count = rootResources.filter((app) => !app.deprecated).length\n    }\n    return count\n  }, [rootResources, filterState.showDeprecated])\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=\"shrink-0\">\n        <OnboardingCard />\n      </div>\n\n      <div className=\"shrink-0\">\n        <FilterBar\n          totalCount={allCount}\n          recentCount={recentCount}\n          deprecatedCount={deprecatedCount}\n          apps={rootResources}\n        />\n      </div>\n\n      <div className=\"flex-1 min-h-0\">\n        {filteredApps.length === 0 ? (\n          <Empty>\n            <EmptyHeader>\n              <EmptyMedia variant=\"icon\">\n                <X className=\"h-6 w-6\" />\n              </EmptyMedia>\n              <EmptyTitle>\n                No apps found{searchValue && ` for \"${searchValue}\"`}\n              </EmptyTitle>\n              <EmptyDescription>\n                Try adjusting your search or filters\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              {searchValue && (\n                <Button\n                  variant=\"outline\"\n                  onClick={() => {\n                    setSearchValue('')\n                    void navigate({ to: '/' })\n                  }}\n                  className=\"gap-2\"\n                >\n                  <X className=\"h-4 w-4\" />\n                  Clear search\n                </Button>\n              )}\n            </EmptyContent>\n          </Empty>\n        ) : (\n          <AppCatalogGrid\n            apps={filteredApps}\n            selectedAppSlug={selectedAppSlug}\n            groupingDefinition={groupingDefinition}\n            onAppClick={handleAppClick}\n            onClosePanel={() => void navigate({ to: '/' })}\n            hasSearch={!!deferredSearchValue}\n            searchQuery={deferredSearchValue}\n            totalAppsCount={totalAppsCount}\n            onClearFilters={handleClearFilters}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/routeTree.gen.d.ts

@@ -3,10 +3,10 @@ import { Route as LayoutRouteImport } from './routes/_layout.js';
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index.js';
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback';
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login.js';
+import { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug';
 import { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index';
 declare const LayoutRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
 declare const LayoutIndexRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/", "/", "/_layout/", "/_layout/", import('zod').ZodObject<{
-    app: import('zod').ZodOptional<import('zod').ZodString>;
     filterTag: import('zod').ZodOptional<import('zod').ZodString>;
 }, import('zod/v4/core').$strip>, import('@tanstack/router-core').ResolveParams<"/">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, () => Promise<{
     appCatalogLoader: import('./modules/appCatalog/routeLoader.js').AppCatalogLoaderReturn;
@@ -16,6 +16,9 @@ declare const AuthCallbackRoute: import('@tanstack/router-core').Route<import('@
     code: string | undefined;
 }, import('@tanstack/router-core').ResolveParams<"/auth/callback">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
 declare const LayoutLoginRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/login", "/login", "/_layout/login", "/_layout/login", undefined, import('@tanstack/router-core').ResolveParams<"/login">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+declare const LayoutAppSlugRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/app/$slug", "/app/$slug", "/_layout/app/$slug", "/_layout/app/$slug", undefined, import('@tanstack/router-core').ResolveParams<"/app/$slug">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, () => Promise<{
+    appCatalogLoader: import('./modules/appCatalog/routeLoader.js').AppCatalogLoaderReturn;
+}>, unknown, unknown, unknown, unknown, undefined>;
 declare const LayoutCatalogAppsIndexRoute: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('./types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/catalog/apps", "/catalog/apps/", "/_layout/catalog/apps/", "/_layout/catalog/apps/", import('zod').ZodObject<{
     app: import('zod').ZodOptional<import('zod').ZodString>;
     q: import('zod').ZodOptional<import('zod').ZodString>;
@@ -24,12 +27,14 @@ export interface FileRoutesByFullPath {
     '/': typeof LayoutIndexRoute;
     '/login': typeof LayoutLoginRoute;
     '/auth/callback': typeof AuthCallbackRoute;
+    '/app/$slug': typeof LayoutAppSlugRoute;
     '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute;
 }
 export interface FileRoutesByTo {
     '/login': typeof LayoutLoginRoute;
     '/auth/callback': typeof AuthCallbackRoute;
     '/': typeof LayoutIndexRoute;
+    '/app/$slug': typeof LayoutAppSlugRoute;
     '/catalog/apps': typeof LayoutCatalogAppsIndexRoute;
 }
 export interface FileRoutesById {
@@ -38,14 +43,15 @@ export interface FileRoutesById {
     '/_layout/login': typeof LayoutLoginRoute;
     '/auth/callback': typeof AuthCallbackRoute;
     '/_layout/': typeof LayoutIndexRoute;
+    '/_layout/app/$slug': typeof LayoutAppSlugRoute;
     '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute;
 }
 export interface FileRouteTypes {
     fileRoutesByFullPath: FileRoutesByFullPath;
-    fullPaths: '/' | '/login' | '/auth/callback' | '/catalog/apps/';
+    fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/';
     fileRoutesByTo: FileRoutesByTo;
-    to: '/login' | '/auth/callback' | '/' | '/catalog/apps';
-    id: '__root__' | '/_layout' | '/_layout/login' | '/auth/callback' | '/_layout/' | '/_layout/catalog/apps/';
+    to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps';
+    id: '__root__' | '/_layout' | '/_layout/login' | '/auth/callback' | '/_layout/' | '/_layout/app/$slug' | '/_layout/catalog/apps/';
     fileRoutesById: FileRoutesById;
 }
 export interface RootRouteChildren {
@@ -82,6 +88,13 @@ declare module '@tanstack/react-router' {
             preLoaderRoute: typeof LayoutLoginRouteImport;
             parentRoute: typeof LayoutRoute;
         };
+        '/_layout/app/$slug': {
+            id: '/_layout/app/$slug';
+            path: '/app/$slug';
+            fullPath: '/app/$slug';
+            preLoaderRoute: typeof LayoutAppSlugRouteImport;
+            parentRoute: typeof LayoutRoute;
+        };
         '/_layout/catalog/apps/': {
             id: '/_layout/catalog/apps/';
             path: '/catalog/apps';
@@ -94,6 +107,7 @@ declare module '@tanstack/react-router' {
 interface LayoutRouteChildren {
     LayoutLoginRoute: typeof LayoutLoginRoute;
     LayoutIndexRoute: typeof LayoutIndexRoute;
+    LayoutAppSlugRoute: typeof LayoutAppSlugRoute;
     LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute;
 }
 declare const LayoutRouteChildren: LayoutRouteChildren;

package/dist/esm/routeTree.gen.js

@@ -1,14 +1,15 @@
 import { Route } from "./routes/__root.js";
 import { Route as Route$2 } from "./routes/_layout.js";
-import { Route as Route$4 } from "./routes/_layout/index.js";
+import { Route as Route$5 } from "./routes/_layout/index.js";
 import { Route as Route$1 } from "./routes/auth.callback.js";
-import { Route as Route$5 } from "./routes/_layout/login.js";
+import { Route as Route$6 } from "./routes/_layout/login.js";
+import { Route as Route$4 } from "./routes/_layout/app._slug.js";
 import { Route as Route$3 } from "./routes/_layout/catalog.apps.index.js";
 const LayoutRoute = Route$2.update({
   id: "/_layout",
   getParentRoute: () => Route
 });
-const LayoutIndexRoute = Route$4.update({
+const LayoutIndexRoute = Route$5.update({
   id: "/",
   path: "/",
   getParentRoute: () => LayoutRoute
@@ -18,11 +19,16 @@ const AuthCallbackRoute = Route$1.update({
   path: "/auth/callback",
   getParentRoute: () => Route
 });
-const LayoutLoginRoute = Route$5.update({
+const LayoutLoginRoute = Route$6.update({
   id: "/login",
   path: "/login",
   getParentRoute: () => LayoutRoute
 });
+const LayoutAppSlugRoute = Route$4.update({
+  id: "/app/$slug",
+  path: "/app/$slug",
+  getParentRoute: () => LayoutRoute
+});
 const LayoutCatalogAppsIndexRoute = Route$3.update({
   id: "/catalog/apps/",
   path: "/catalog/apps/",
@@ -31,6 +37,7 @@ const LayoutCatalogAppsIndexRoute = Route$3.update({
 const LayoutRouteChildren = {
   LayoutLoginRoute,
   LayoutIndexRoute,
+  LayoutAppSlugRoute,
   LayoutCatalogAppsIndexRoute
 };
 const LayoutRouteWithChildren = LayoutRoute._addFileChildren(LayoutRouteChildren);

package/dist/esm/routeTree.gen.js.map

@@ -1 +1 @@
-{"version":3,"file":"routeTree.gen.js","sources":["../../src/routeTree.gen.ts"],"sourcesContent":["/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as LayoutIndexRouteImport } from './routes/_layout/index'\nimport { Route as AuthCallbackRouteImport } from './routes/auth.callback'\nimport { Route as LayoutLoginRouteImport } from './routes/_layout/login'\nimport { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'\n\nconst LayoutRoute = LayoutRouteImport.update({\n  id: '/_layout',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutIndexRoute = LayoutIndexRouteImport.update({\n  id: '/',\n  path: '/',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst AuthCallbackRoute = AuthCallbackRouteImport.update({\n  id: '/auth/callback',\n  path: '/auth/callback',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutLoginRoute = LayoutLoginRouteImport.update({\n  id: '/login',\n  path: '/login',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({\n  id: '/catalog/apps/',\n  path: '/catalog/apps/',\n  getParentRoute: () => LayoutRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n  '/': typeof LayoutIndexRoute\n  '/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesByTo {\n  '/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/': typeof LayoutIndexRoute\n  '/catalog/apps': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesById {\n  __root__: typeof rootRouteImport\n  '/_layout': typeof LayoutRouteWithChildren\n  '/_layout/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/_layout/': typeof LayoutIndexRoute\n  '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRouteTypes {\n  fileRoutesByFullPath: FileRoutesByFullPath\n  fullPaths: '/' | '/login' | '/auth/callback' | '/catalog/apps/'\n  fileRoutesByTo: FileRoutesByTo\n  to: '/login' | '/auth/callback' | '/' | '/catalog/apps'\n  id:\n    | '__root__'\n    | '/_layout'\n    | '/_layout/login'\n    | '/auth/callback'\n    | '/_layout/'\n    | '/_layout/catalog/apps/'\n  fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n  LayoutRoute: typeof LayoutRouteWithChildren\n  AuthCallbackRoute: typeof AuthCallbackRoute\n}\n\ndeclare module '@tanstack/react-router' {\n  interface FileRoutesByPath {\n    '/_layout': {\n      id: '/_layout'\n      path: ''\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/': {\n      id: '/_layout/'\n      path: '/'\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/auth/callback': {\n      id: '/auth/callback'\n      path: '/auth/callback'\n      fullPath: '/auth/callback'\n      preLoaderRoute: typeof AuthCallbackRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/login': {\n      id: '/_layout/login'\n      path: '/login'\n      fullPath: '/login'\n      preLoaderRoute: typeof LayoutLoginRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/catalog/apps/': {\n      id: '/_layout/catalog/apps/'\n      path: '/catalog/apps'\n      fullPath: '/catalog/apps/'\n      preLoaderRoute: typeof LayoutCatalogAppsIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n  }\n}\n\ninterface LayoutRouteChildren {\n  LayoutLoginRoute: typeof LayoutLoginRoute\n  LayoutIndexRoute: typeof LayoutIndexRoute\n  LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n  LayoutLoginRoute: LayoutLoginRoute,\n  LayoutIndexRoute: LayoutIndexRoute,\n  LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,\n}\n\nconst LayoutRouteWithChildren =\n  LayoutRoute._addFileChildren(LayoutRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n  LayoutRoute: LayoutRouteWithChildren,\n  AuthCallbackRoute: AuthCallbackRoute,\n}\nexport const routeTree = rootRouteImport\n  ._addFileChildren(rootRouteChildren)\n  ._addFileTypes<FileRouteTypes>()\n"],"names":["LayoutRouteImport","rootRouteImport","LayoutIndexRouteImport","AuthCallbackRouteImport","LayoutLoginRouteImport","LayoutCatalogAppsIndexRouteImport"],"mappings":";;;;;;AAiBA,MAAM,cAAcA,QAAkB,OAAO;AAAA,EAC3C,IAAI;AAAA,EACJ,gBAAgB,MAAMC;AACxB,CAAQ;AACR,MAAM,mBAAmBC,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,oBAAoBC,QAAwB,OAAO;AAAA,EACvD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAMF;AACxB,CAAQ;AACR,MAAM,mBAAmBG,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,8BAA8BC,QAAkC,OAAO;AAAA,EAC3E,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AAuFR,MAAM,sBAA2C;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,0BACJ,YAAY,iBAAiB,mBAAmB;AAElD,MAAM,oBAAuC;AAAA,EAC3C,aAAa;AAAA,EACb;AACF;AACO,MAAM,YAAYJ,MACtB,iBAAiB,iBAAiB,EAClC,cAAA;"}
+{"version":3,"file":"routeTree.gen.js","sources":["../../src/routeTree.gen.ts"],"sourcesContent":["/* eslint-disable */\n\n// @ts-nocheck\n\n// noinspection JSUnusedGlobalSymbols\n\n// This file was automatically generated by TanStack Router.\n// You should NOT make any changes in this file as it will be overwritten.\n// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.\n\nimport { Route as rootRouteImport } from './routes/__root'\nimport { Route as LayoutRouteImport } from './routes/_layout'\nimport { Route as LayoutIndexRouteImport } from './routes/_layout/index'\nimport { Route as AuthCallbackRouteImport } from './routes/auth.callback'\nimport { Route as LayoutLoginRouteImport } from './routes/_layout/login'\nimport { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'\nimport { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'\n\nconst LayoutRoute = LayoutRouteImport.update({\n  id: '/_layout',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutIndexRoute = LayoutIndexRouteImport.update({\n  id: '/',\n  path: '/',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst AuthCallbackRoute = AuthCallbackRouteImport.update({\n  id: '/auth/callback',\n  path: '/auth/callback',\n  getParentRoute: () => rootRouteImport,\n} as any)\nconst LayoutLoginRoute = LayoutLoginRouteImport.update({\n  id: '/login',\n  path: '/login',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutAppSlugRoute = LayoutAppSlugRouteImport.update({\n  id: '/app/$slug',\n  path: '/app/$slug',\n  getParentRoute: () => LayoutRoute,\n} as any)\nconst LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({\n  id: '/catalog/apps/',\n  path: '/catalog/apps/',\n  getParentRoute: () => LayoutRoute,\n} as any)\n\nexport interface FileRoutesByFullPath {\n  '/': typeof LayoutIndexRoute\n  '/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/app/$slug': typeof LayoutAppSlugRoute\n  '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesByTo {\n  '/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/': typeof LayoutIndexRoute\n  '/app/$slug': typeof LayoutAppSlugRoute\n  '/catalog/apps': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRoutesById {\n  __root__: typeof rootRouteImport\n  '/_layout': typeof LayoutRouteWithChildren\n  '/_layout/login': typeof LayoutLoginRoute\n  '/auth/callback': typeof AuthCallbackRoute\n  '/_layout/': typeof LayoutIndexRoute\n  '/_layout/app/$slug': typeof LayoutAppSlugRoute\n  '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute\n}\nexport interface FileRouteTypes {\n  fileRoutesByFullPath: FileRoutesByFullPath\n  fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/'\n  fileRoutesByTo: FileRoutesByTo\n  to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps'\n  id:\n    | '__root__'\n    | '/_layout'\n    | '/_layout/login'\n    | '/auth/callback'\n    | '/_layout/'\n    | '/_layout/app/$slug'\n    | '/_layout/catalog/apps/'\n  fileRoutesById: FileRoutesById\n}\nexport interface RootRouteChildren {\n  LayoutRoute: typeof LayoutRouteWithChildren\n  AuthCallbackRoute: typeof AuthCallbackRoute\n}\n\ndeclare module '@tanstack/react-router' {\n  interface FileRoutesByPath {\n    '/_layout': {\n      id: '/_layout'\n      path: ''\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/': {\n      id: '/_layout/'\n      path: '/'\n      fullPath: '/'\n      preLoaderRoute: typeof LayoutIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/auth/callback': {\n      id: '/auth/callback'\n      path: '/auth/callback'\n      fullPath: '/auth/callback'\n      preLoaderRoute: typeof AuthCallbackRouteImport\n      parentRoute: typeof rootRouteImport\n    }\n    '/_layout/login': {\n      id: '/_layout/login'\n      path: '/login'\n      fullPath: '/login'\n      preLoaderRoute: typeof LayoutLoginRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/app/$slug': {\n      id: '/_layout/app/$slug'\n      path: '/app/$slug'\n      fullPath: '/app/$slug'\n      preLoaderRoute: typeof LayoutAppSlugRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n    '/_layout/catalog/apps/': {\n      id: '/_layout/catalog/apps/'\n      path: '/catalog/apps'\n      fullPath: '/catalog/apps/'\n      preLoaderRoute: typeof LayoutCatalogAppsIndexRouteImport\n      parentRoute: typeof LayoutRoute\n    }\n  }\n}\n\ninterface LayoutRouteChildren {\n  LayoutLoginRoute: typeof LayoutLoginRoute\n  LayoutIndexRoute: typeof LayoutIndexRoute\n  LayoutAppSlugRoute: typeof LayoutAppSlugRoute\n  LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute\n}\n\nconst LayoutRouteChildren: LayoutRouteChildren = {\n  LayoutLoginRoute: LayoutLoginRoute,\n  LayoutIndexRoute: LayoutIndexRoute,\n  LayoutAppSlugRoute: LayoutAppSlugRoute,\n  LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,\n}\n\nconst LayoutRouteWithChildren =\n  LayoutRoute._addFileChildren(LayoutRouteChildren)\n\nconst rootRouteChildren: RootRouteChildren = {\n  LayoutRoute: LayoutRouteWithChildren,\n  AuthCallbackRoute: AuthCallbackRoute,\n}\nexport const routeTree = rootRouteImport\n  ._addFileChildren(rootRouteChildren)\n  ._addFileTypes<FileRouteTypes>()\n"],"names":["LayoutRouteImport","rootRouteImport","LayoutIndexRouteImport","AuthCallbackRouteImport","LayoutLoginRouteImport","LayoutAppSlugRouteImport","LayoutCatalogAppsIndexRouteImport"],"mappings":";;;;;;;AAkBA,MAAM,cAAcA,QAAkB,OAAO;AAAA,EAC3C,IAAI;AAAA,EACJ,gBAAgB,MAAMC;AACxB,CAAQ;AACR,MAAM,mBAAmBC,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,oBAAoBC,QAAwB,OAAO;AAAA,EACvD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAMF;AACxB,CAAQ;AACR,MAAM,mBAAmBG,QAAuB,OAAO;AAAA,EACrD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,qBAAqBC,QAAyB,OAAO;AAAA,EACzD,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AACR,MAAM,8BAA8BC,QAAkC,OAAO;AAAA,EAC3E,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,gBAAgB,MAAM;AACxB,CAAQ;AAmGR,MAAM,sBAA2C;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,0BACJ,YAAY,iBAAiB,mBAAmB;AAElD,MAAM,oBAAuC;AAAA,EAC3C,aAAa;AAAA,EACb;AACF;AACO,MAAM,YAAYL,MACtB,iBAAiB,iBAAiB,EAClC,cAAA;"}

package/dist/esm/routes/_layout/app.$slug.d.ts

@@ -0,0 +1,3 @@
+export declare const Route: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('../../types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/app/$slug", "/app/$slug", "/_layout/app/$slug", "/_layout/app/$slug", undefined, import('@tanstack/router-core').ResolveParams<"/app/$slug">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, () => Promise<{
+    appCatalogLoader: import('~/modules/appCatalog/routeLoader').AppCatalogLoaderReturn;
+}>, unknown, unknown, unknown, unknown, undefined>;

package/dist/esm/routes/_layout/app._slug.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { createFileRoute } from "@tanstack/react-router";
+import { appCatalogRouteLoader } from "../../modules/appCatalog/routeLoader.js";
+import { AppCatalogLayout } from "../../modules/appCatalog/ui/layout/AppCatalogLayout.js";
+import { AppCatalogPage } from "../../modules/appCatalog/ui/pages/AppCatalogPage.js";
+const Route = createFileRoute("/_layout/app/$slug")({
+  component: RouteComponent,
+  async loader() {
+    const appCatalogLoader = await appCatalogRouteLoader();
+    return { appCatalogLoader };
+  }
+});
+function RouteComponent() {
+  const { queryClient, trpcClient } = Route.useRouteContext();
+  const { slug } = Route.useParams();
+  return /* @__PURE__ */ jsx(AppCatalogLayout, { queryClient, trpcClient, children: /* @__PURE__ */ jsx(AppCatalogPage, { selectedSlug: slug }) });
+}
+export {
+  Route
+};
+//# sourceMappingURL=app._slug.js.map

package/dist/esm/routes/_layout/app._slug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app._slug.js","sources":["../../../../src/routes/_layout/app.$slug.tsx"],"sourcesContent":["import { createFileRoute } from '@tanstack/react-router'\nimport { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'\nimport { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'\nimport { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'\n\nexport const Route = createFileRoute('/_layout/app/$slug')({\n  component: RouteComponent,\n  async loader() {\n    const appCatalogLoader = await appCatalogRouteLoader()\n    return { appCatalogLoader }\n  },\n})\n\nfunction RouteComponent() {\n  const { queryClient, trpcClient } = Route.useRouteContext()\n  const { slug } = Route.useParams()\n\n  return (\n    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>\n      <AppCatalogPage selectedSlug={slug} />\n    </AppCatalogLayout>\n  )\n}\n"],"names":[],"mappings":";;;;;AAKO,MAAM,QAAQ,gBAAgB,oBAAoB,EAAE;AAAA,EACzD,WAAW;AAAA,EACX,MAAM,SAAS;AACb,UAAM,mBAAmB,MAAM,sBAAA;AAC/B,WAAO,EAAE,iBAAA;AAAA,EACX;AACF,CAAC;AAED,SAAS,iBAAiB;AACxB,QAAM,EAAE,aAAa,eAAe,MAAM,gBAAA;AAC1C,QAAM,EAAE,KAAA,IAAS,MAAM,UAAA;AAEvB,SACE,oBAAC,oBAAiB,aAA0B,YAC1C,8BAAC,gBAAA,EAAe,cAAc,MAAM,EAAA,CACtC;AAEJ;"}

package/dist/esm/routes/_layout/index.d.ts

@@ -1,6 +1,5 @@
 import { z } from 'zod';
 export declare const Route: import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/router-core').Route<import('@tanstack/react-router').Register, import('@tanstack/react-router').RootRoute<import('@tanstack/react-router').Register, undefined, import('../../types/types.js').AcRouterContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "", "/", "/_layout", "/_layout", undefined, import('@tanstack/router-core').ResolveParams<"">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>, "/", "/", "/_layout/", "/_layout/", z.ZodObject<{
-    app: z.ZodOptional<z.ZodString>;
     filterTag: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>, import('@tanstack/router-core').ResolveParams<"/">, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, import('@tanstack/router-core').AnyContext, {}, () => Promise<{
     appCatalogLoader: import('~/modules/appCatalog/routeLoader').AppCatalogLoaderReturn;

package/dist/esm/routes/_layout/index.js

@@ -5,7 +5,6 @@ import { AppCatalogLayout } from "../../modules/appCatalog/ui/layout/AppCatalogL
 import { AppCatalogPage } from "../../modules/appCatalog/ui/pages/AppCatalogPage.js";
 import { object, string } from "../../node_modules/.pnpm/zod@4.3.5/node_modules/zod/v4/classic/schemas.js";
 const searchSchema = object({
-  app: string().optional(),
   filterTag: string().optional()
 });
 const Route = createFileRoute("/_layout/")({

package/dist/esm/routes/_layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/routes/_layout/index.tsx"],"sourcesContent":["import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'\nimport { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'\nimport { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'\n\nconst searchSchema = z.object({\n  app: z.string().optional(),\n  filterTag: z.string().optional(),\n})\n\nexport const Route = createFileRoute('/_layout/')({\n  component: RouteComponent,\n  validateSearch: searchSchema,\n  async loader() {\n    const appCatalogLoader = await appCatalogRouteLoader()\n    return {\n      appCatalogLoader,\n    }\n  },\n})\n\nfunction RouteComponent() {\n  const { queryClient, trpcClient } = Route.useRouteContext()\n\n  return (\n    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>\n      <AppCatalogPage />\n    </AppCatalogLayout>\n  )\n}\n"],"names":["z.object","z.string"],"mappings":";;;;;;AAMA,MAAM,eAAeA,OAAS;AAAA,EAC5B,KAAKC,OAAE,EAAS,SAAA;AAAA,EAChB,WAAWA,OAAE,EAAS,SAAA;AACxB,CAAC;AAEM,MAAM,QAAQ,gBAAgB,WAAW,EAAE;AAAA,EAChD,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,MAAM,SAAS;AACb,UAAM,mBAAmB,MAAM,sBAAA;AAC/B,WAAO;AAAA,MACL;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,iBAAiB;AACxB,QAAM,EAAE,aAAa,eAAe,MAAM,gBAAA;AAE1C,6BACG,kBAAA,EAAiB,aAA0B,YAC1C,UAAA,oBAAC,kBAAe,GAClB;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../../src/routes/_layout/index.tsx"],"sourcesContent":["import { createFileRoute } from '@tanstack/react-router'\nimport { z } from 'zod'\nimport { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'\nimport { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'\nimport { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'\n\nconst searchSchema = z.object({\n  filterTag: z.string().optional(),\n})\n\nexport const Route = createFileRoute('/_layout/')({\n  component: RouteComponent,\n  validateSearch: searchSchema,\n  async loader() {\n    const appCatalogLoader = await appCatalogRouteLoader()\n    return {\n      appCatalogLoader,\n    }\n  },\n})\n\nfunction RouteComponent() {\n  const { queryClient, trpcClient } = Route.useRouteContext()\n\n  return (\n    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>\n      <AppCatalogPage />\n    </AppCatalogLayout>\n  )\n}\n"],"names":["z.object","z.string"],"mappings":";;;;;;AAMA,MAAM,eAAeA,OAAS;AAAA,EAC5B,WAAWC,OAAE,EAAS,SAAA;AACxB,CAAC;AAEM,MAAM,QAAQ,gBAAgB,WAAW,EAAE;AAAA,EAChD,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,MAAM,SAAS;AACb,UAAM,mBAAmB,MAAM,sBAAA;AAC/B,WAAO;AAAA,MACL;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;AAED,SAAS,iBAAiB;AACxB,QAAM,EAAE,aAAa,eAAe,MAAM,gBAAA;AAE1C,6BACG,kBAAA,EAAiB,aAA0B,YAC1C,UAAA,oBAAC,kBAAe,GAClB;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.4.0",
-    "@igstack/app-catalog-shared-core": "0.4.0"
+    "@igstack/app-catalog-backend-core": "0.6.0",
+    "@igstack/app-catalog-shared-core": "0.6.0"
   },
   "peerDependencies": {
     "react": "19.1.2",

package/src/__tests__/integration/appDeepLink.integration.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import { fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
+
+import { given } from './harness/given'
+import { magazine } from './mock-backend/magazines'
+
+describe('App deep-link routing', () => {
+  it('opens the app detail when navigating directly to /app/<slug>', async () => {
+    const { ui } = await given(magazine.full(), { initialRoute: '/app/jira' })
+    await waitFor(() => {
+      expect(ui.catalog.isDetailPanelOpen()).toBe(true)
+    })
+    expect(ui.catalog.getTableData().length).toBeGreaterThan(0)
+  })
+
+  it('navigates to /app/<slug> when selecting an app, and pushes history', async () => {
+    const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
+    await ui.catalog.openApp('Jira')
+    await waitFor(() => {
+      expect(router.state.location.pathname).toBe('/app/jira')
+    })
+    // push (not replace): catalog '/' is still in history, Back returns to it
+    expect(router.history.canGoBack()).toBe(true)
+  })
+
+  it('renders the catalog with nothing open for an unknown slug', async () => {
+    const { ui } = await given(magazine.full(), {
+      initialRoute: '/app/does-not-exist',
+    })
+    await waitFor(() => {
+      expect(ui.catalog.getTableData().length).toBeGreaterThan(0)
+    })
+    expect(ui.catalog.isDetailPanelOpen()).toBe(false)
+  })
+
+  it('returns to / when the detail panel is closed', async () => {
+    const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
+    await ui.catalog.openApp('Jira')
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' })
+    await waitFor(() => {
+      expect(ui.catalog.isDetailPanelOpen()).toBe(false)
+    })
+    expect(router.state.location.pathname).toBe('/')
+  })
+
+  it('ignores legacy ?app= query param (no detail opens)', async () => {
+    const { ui } = await given(magazine.full(), { initialRoute: '/?app=jira' })
+    await waitFor(() => {
+      expect(ui.catalog.getTableData().length).toBeGreaterThan(0)
+    })
+    expect(ui.catalog.isDetailPanelOpen()).toBe(false)
+  })
+})

package/src/__tests__/integration/harness/given.tsx

@@ -32,6 +32,7 @@ import { GalleryTools } from '../tools/GalleryTools'
 export interface GivenResult {
   ui: UiTools
   backend: MockBackendVerifier
+  router: ReturnType<typeof createAcRouter>
 }
 
 export interface UiTools {
@@ -57,7 +58,10 @@ export async function cleanupTestResources(): Promise<void> {
   }
 }
 
-export async function given(magazine: Magazine): Promise<GivenResult> {
+export async function given(
+  magazine: Magazine,
+  opts: { initialRoute?: string } = {},
+): Promise<GivenResult> {
   // Clean up any previous resources
   await cleanupTestResources()
   resetConfigurerCounter()
@@ -126,7 +130,7 @@ export async function given(magazine: Magazine): Promise<GivenResult> {
 
   const router = createAcRouter({
     history: createMemoryHistory({
-      initialEntries: ['/catalog/apps'],
+      initialEntries: [opts.initialRoute ?? '/catalog/apps'],
     }),
     context: {
       queryClient,
@@ -187,5 +191,5 @@ export async function given(magazine: Magazine): Promise<GivenResult> {
     globalError: () => getGlobalError(),
   }
 
-  return { ui, backend }
+  return { ui, backend, router }
 }

package/src/modules/appCatalog/ui/components/AccessRequestSection.tsx

@@ -20,6 +20,7 @@ import {
   TableHeader,
   TableRow,
 } from '~/ui/table'
+import { MarkdownLink } from './MarkdownText'
 import { PersonBadge } from './PersonBadge'
 
 // Constants
@@ -30,24 +31,6 @@ interface AccessRequestSectionProps {
   approvalMethods: AppApprovalMethod[]
 }
 
-// Component for rendering markdown links with security attributes
-const MarkdownLink = ({
-  href,
-  children,
-}: {
-  href?: string
-  children?: React.ReactNode
-}) => (
-  <a
-    href={href}
-    target="_blank"
-    rel="noopener noreferrer"
-    className="text-primary hover:underline"
-  >
-    {children}
-  </a>
-)
-
 // Helper function for approval method icons
 function getApprovalMethodIcon(
   type: 'service' | 'personTeam' | 'custom' | 'noAccessRequired' | 'unknown',

package/src/modules/appCatalog/ui/components/MarkdownText.tsx

@@ -0,0 +1,42 @@
+import type React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+/**
+ * Renders a markdown link with security attributes (opens in a new tab,
+ * no referrer/opener leakage). Shared so all catalog text fields render
+ * links identically.
+ */
+export const MarkdownLink = ({
+  href,
+  children,
+}: {
+  href?: string
+  children?: React.ReactNode
+}) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="text-primary hover:underline"
+  >
+    {children}
+  </a>
+)
+
+/**
+ * Renders user-facing catalog text (descriptions, comments, prompts) as
+ * markdown so links become clickable. Links use {@link MarkdownLink}.
+ */
+export function MarkdownText({
+  children,
+  className,
+}: {
+  children: string
+  className?: string
+}) {
+  return (
+    <span className={className}>
+      <ReactMarkdown components={{ a: MarkdownLink }}>{children}</ReactMarkdown>
+    </span>
+  )
+}

package/src/modules/appCatalog/ui/grid/AppCatalogGrid.tsx

@@ -31,6 +31,7 @@ import {
 import { AccessRequestSection } from '../components/AccessRequestSection'
 import { useUser } from '~/modules/auth'
 import { InlineEditableField } from '../components/InlineEditableField'
+import { MarkdownText } from '../components/MarkdownText'
 import { ScreenshotGallery } from '../components/ScreenshotGallery'
 import { useUpdateApp } from '../../hooks/useUpdateApp'
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
@@ -54,6 +55,8 @@ export interface AppCatalogGridProps {
   totalAppsCount?: number
   /** Callback to clear all filters and search */
   onClearFilters?: () => void
+  /** Called when the user closes the detail panel (Esc or X) — e.g. to navigate back to the catalog URL */
+  onClosePanel?: () => void
 }
 
 function getIconUrl(iconName: string): string {
@@ -395,10 +398,12 @@ function AppDetails({
               placeholder="Description"
               className="min-h-[4rem] resize-y text-sm text-muted-foreground"
             />
+          ) : app.description ? (
+            <MarkdownText className="prose prose-sm max-w-none text-sm text-muted-foreground [&_p]:m-0">
+              {app.description}
+            </MarkdownText>
           ) : (
-            <p className="text-sm text-muted-foreground">
-              {app.description || '—'}
-            </p>
+            <p className="text-sm text-muted-foreground">—</p>
           )}
         </div>
 
@@ -694,6 +699,7 @@ export function AppCatalogGrid({
   searchQuery,
   totalAppsCount,
   onClearFilters,
+  onClosePanel,
 }: AppCatalogGridProps) {
   const selectedApp = selectedAppSlug
     ? apps.find((a) => a.slug === selectedAppSlug)
@@ -859,6 +865,7 @@ export function AppCatalogGrid({
 
   const handleClosePanel = () => {
     setHasUserClosed(true)
+    onClosePanel?.()
   }
 
   return (