@igstack/app-catalog-frontend-core 6.6.0 → 6.8.0

package/dist/esm/App.d.ts

@@ -2,13 +2,39 @@ import { QueryClient } from '@tanstack/react-query';
 import { TRPCRouter } from '@igstack/app-catalog-backend-core';
 import { TRPCClient } from '@trpc/client';
 import { AcDb } from './userDb/AcDb.js';
-import { createAcRouter } from './util/createAcRouter.js';
+import { RegisteredRouter } from '@tanstack/react-router';
 import { UiSettings } from './types/uiSettings.js';
+import { AcPlugin } from './modules/extensions.js';
 export interface AppProps {
-    router: ReturnType<typeof createAcRouter>;
+    /**
+     * `RegisteredRouter`, not `ReturnType<typeof createAcRouter>`.
+     *
+     * That was a type-only import, and a type-only import still pulls the
+     * referenced file's `declare module` into the program — so naming
+     * `createAcRouter` here put the core's `Register` augmentation into every
+     * consumer, and a deployment composing its own route tree could not declare
+     * its own without `TS2717`.
+     *
+     * This widens nothing: `RegisteredRouter` resolves per program against
+     * whatever `Register` that program declared, so the core's own program gets
+     * the core's router and a deployment gets its own, each exactly typed. A
+     * router built from a different route tree is still rejected here.
+     *
+     * The one blind spot, guarded by a type test on the consumer side: with NO
+     * `Register` anywhere in a program this silently degrades to `AnyRouter`.
+     */
+    router: RegisteredRouter;
     queryClient: QueryClient;
     trpcClient: TRPCClient<TRPCRouter>;
     db: AcDb;
     uiSettings?: UiSettings;
+    /**
+     * Deployment-specific UI, rendered at the slots the core declares. Optional:
+     * with none registered every slot renders nothing and the UI is identical to
+     * one with no slots at all.
+     *
+     * Must be a module-level constant — see `AcPlugin`.
+     */
+    extensions?: readonly AcPlugin[];
 }
-export declare function App({ router, queryClient, trpcClient, db, uiSettings, }: AppProps): import("react/jsx-runtime").JSX.Element;
+export declare function App({ router, queryClient, trpcClient, db, uiSettings, extensions, }: AppProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/App.js

@@ -4,14 +4,16 @@ import { RouterProvider } from "@tanstack/react-router";
 import { DbProvider } from "./userDb/DbContext.js";
 import { TRPCProvider } from "./api/infra/trpc.js";
 import { UiSettingsContext } from "./context/UiSettingsContext.js";
+import { ExtensionsContext } from "./modules/extensions/ExtensionsContext.js";
 function App({
   router,
   queryClient,
   trpcClient,
   db,
-  uiSettings
+  uiSettings,
+  extensions
 }) {
-  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(TRPCProvider, { queryClient, trpcClient, children: /* @__PURE__ */ jsx(DbProvider, { db, children: /* @__PURE__ */ jsx(UiSettingsContext, { value: uiSettings, children: /* @__PURE__ */ jsx(RouterProvider, { router }) }) }) }) });
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(TRPCProvider, { queryClient, trpcClient, children: /* @__PURE__ */ jsx(DbProvider, { db, children: /* @__PURE__ */ jsx(UiSettingsContext, { value: uiSettings, children: /* @__PURE__ */ jsx(ExtensionsContext, { value: extensions, children: /* @__PURE__ */ jsx(RouterProvider, { router }) }) }) }) }) });
 }
 export {
   App

package/dist/esm/App.js.map

@@ -1 +1 @@
-{"version":3,"file":"App.js","sources":["../../src/App.tsx"],"sourcesContent":["import { QueryClientProvider } from '@tanstack/react-query'\nimport { RouterProvider } from '@tanstack/react-router'\nimport { DbProvider } from './userDb/DbContext'\nimport type { QueryClient } from '@tanstack/react-query'\nimport type { TRPCRouter } from '@igstack/app-catalog-backend-core'\nimport type { TRPCClient } from '@trpc/client'\nimport type { AcDb } from './userDb/AcDb'\nimport type { createAcRouter } from './util/createAcRouter'\nimport { TRPCProvider } from './api/infra/trpc'\nimport type { UiSettings } from './types/uiSettings'\nimport { UiSettingsContext } from './context/UiSettingsContext'\n\nexport interface AppProps {\n  router: ReturnType<typeof createAcRouter>\n  queryClient: QueryClient\n  trpcClient: TRPCClient<TRPCRouter>\n  db: AcDb\n  uiSettings?: UiSettings\n}\n\nexport function App({\n  router,\n  queryClient,\n  trpcClient,\n  db,\n  uiSettings,\n}: AppProps) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <TRPCProvider queryClient={queryClient} trpcClient={trpcClient}>\n        <DbProvider db={db}>\n          <UiSettingsContext value={uiSettings}>\n            <RouterProvider router={router} />\n          </UiSettingsContext>\n        </DbProvider>\n      </TRPCProvider>\n    </QueryClientProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAoBO,SAAS,IAAI;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,SACE,oBAAC,uBAAoB,QAAQ,aAC3B,8BAAC,cAAA,EAAa,aAA0B,YACtC,UAAA,oBAAC,YAAA,EAAW,IACV,UAAA,oBAAC,mBAAA,EAAkB,OAAO,YACxB,UAAA,oBAAC,kBAAe,OAAA,CAAgB,EAAA,CAClC,EAAA,CACF,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"App.js","sources":["../../src/App.tsx"],"sourcesContent":["import { QueryClientProvider } from '@tanstack/react-query'\nimport { RouterProvider } from '@tanstack/react-router'\nimport { DbProvider } from './userDb/DbContext'\nimport type { QueryClient } from '@tanstack/react-query'\nimport type { TRPCRouter } from '@igstack/app-catalog-backend-core'\nimport type { TRPCClient } from '@trpc/client'\nimport type { AcDb } from './userDb/AcDb'\nimport type { RegisteredRouter } from '@tanstack/react-router'\nimport { TRPCProvider } from './api/infra/trpc'\nimport type { UiSettings } from './types/uiSettings'\nimport { UiSettingsContext } from './context/UiSettingsContext'\nimport { ExtensionsContext } from './modules/extensions'\nimport type { AcPlugin } from './modules/extensions'\n\nexport interface AppProps {\n  /**\n   * `RegisteredRouter`, not `ReturnType<typeof createAcRouter>`.\n   *\n   * That was a type-only import, and a type-only import still pulls the\n   * referenced file's `declare module` into the program — so naming\n   * `createAcRouter` here put the core's `Register` augmentation into every\n   * consumer, and a deployment composing its own route tree could not declare\n   * its own without `TS2717`.\n   *\n   * This widens nothing: `RegisteredRouter` resolves per program against\n   * whatever `Register` that program declared, so the core's own program gets\n   * the core's router and a deployment gets its own, each exactly typed. A\n   * router built from a different route tree is still rejected here.\n   *\n   * The one blind spot, guarded by a type test on the consumer side: with NO\n   * `Register` anywhere in a program this silently degrades to `AnyRouter`.\n   */\n  router: RegisteredRouter\n  queryClient: QueryClient\n  trpcClient: TRPCClient<TRPCRouter>\n  db: AcDb\n  uiSettings?: UiSettings\n  /**\n   * Deployment-specific UI, rendered at the slots the core declares. Optional:\n   * with none registered every slot renders nothing and the UI is identical to\n   * one with no slots at all.\n   *\n   * Must be a module-level constant — see `AcPlugin`.\n   */\n  extensions?: readonly AcPlugin[]\n}\n\nexport function App({\n  router,\n  queryClient,\n  trpcClient,\n  db,\n  uiSettings,\n  extensions,\n}: AppProps) {\n  return (\n    <QueryClientProvider client={queryClient}>\n      <TRPCProvider queryClient={queryClient} trpcClient={trpcClient}>\n        <DbProvider db={db}>\n          <UiSettingsContext value={uiSettings}>\n            {/* Above the router, so a slot anywhere in the tree can read it. */}\n            <ExtensionsContext value={extensions}>\n              <RouterProvider router={router} />\n            </ExtensionsContext>\n          </UiSettingsContext>\n        </DbProvider>\n      </TRPCProvider>\n    </QueryClientProvider>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AA+CO,SAAS,IAAI;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,SACE,oBAAC,qBAAA,EAAoB,QAAQ,aAC3B,UAAA,oBAAC,cAAA,EAAa,aAA0B,YACtC,UAAA,oBAAC,YAAA,EAAW,IACV,UAAA,oBAAC,mBAAA,EAAkB,OAAO,YAExB,UAAA,oBAAC,mBAAA,EAAkB,OAAO,YACxB,UAAA,oBAAC,gBAAA,EAAe,QAAgB,EAAA,CAClC,EAAA,CACF,EAAA,CACF,EAAA,CACF,GACF;AAEJ;"}

package/dist/esm/__tests__/publicEntryResolves.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/appPropsFactory.d.ts

@@ -1,2 +1,20 @@
+import { RegisteredRouter } from '@tanstack/react-router';
 import { AppProps } from './App.js';
-export declare function appPropsFactory(): AppProps;
+import { AcRouterInitParams } from './types/types.js';
+export interface AppPropsFactoryOptions {
+    /**
+     * How to build the router.
+     *
+     * Injected rather than imported, because the ROUTE TREE belongs to the
+     * deployment. A deployment that composes its own tree declares its own
+     * `declare module … Register`, and importing the core's `createAcRouter`
+     * here would put the core's competing augmentation into that program — a
+     * hard `TS2717`, and `import type` would not help: augmentations are
+     * collected when the program is built.
+     *
+     * Using the core's tree unchanged? Pass `createAcRouter` from
+     * `@igstack/app-catalog-frontend-core/router`.
+     */
+    createRouter: (init: AcRouterInitParams) => RegisteredRouter;
+}
+export declare function appPropsFactory({ createRouter, }: AppPropsFactoryOptions): AppProps;

package/dist/esm/appPropsFactory.js

@@ -2,8 +2,9 @@ import { createBrowserHistory } from "@tanstack/react-router";
 import { createTRPCClient, httpBatchLink } from "@trpc/client";
 import { AcDb } from "./userDb/AcDb.js";
 import { createQueryClient } from "./api/infra/createQueryClient.js";
-import { createAcRouter } from "./util/createAcRouter.js";
-function appPropsFactory() {
+function appPropsFactory({
+  createRouter
+}) {
   const trpcClient = createTRPCClient({
     links: [
       httpBatchLink({
@@ -16,7 +17,7 @@ function appPropsFactory() {
   const plugins = [
     // Future plugins can be added here
   ];
-  const router = createAcRouter({
+  const router = createRouter({
     history: createBrowserHistory(),
     context: {
       queryClient,

package/dist/esm/appPropsFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"appPropsFactory.js","sources":["../../src/appPropsFactory.ts"],"sourcesContent":["import { createBrowserHistory } from '@tanstack/react-router'\nimport { createTRPCClient, httpBatchLink } from '@trpc/client'\nimport { AcDb } from './userDb/AcDb'\nimport type { TRPCRouter } from '@igstack/app-catalog-backend-core'\nimport type { AppProps } from './App'\nimport type { AcPlugin } from './modules/pluginCore/types'\nimport { createQueryClient } from './api/infra/createQueryClient'\nimport { createAcRouter } from './util/createAcRouter'\n\n// registerSW();\nexport function appPropsFactory(): AppProps {\n  const trpcClient = createTRPCClient<TRPCRouter>({\n    links: [\n      httpBatchLink({\n        url: `${window.location.origin}/api/trpc`,\n      }),\n    ],\n  })\n\n  const db = new AcDb()\n  const queryClient = createQueryClient({ trpcClient, db })\n  const plugins: AcPlugin[] = [\n    // Future plugins can be added here\n  ]\n  const router = createAcRouter({\n    history: createBrowserHistory(),\n    context: {\n      queryClient,\n      trpcClient,\n      db,\n      plugins,\n      boostrapHealth: {},\n    },\n  })\n\n  return { router, queryClient, trpcClient, db }\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,kBAA4B;AAC1C,QAAM,aAAa,iBAA6B;AAAA,IAC9C,OAAO;AAAA,MACL,cAAc;AAAA,QACZ,KAAK,GAAG,OAAO,SAAS,MAAM;AAAA,MAAA,CAC/B;AAAA,IAAA;AAAA,EACH,CACD;AAED,QAAM,KAAK,IAAI,KAAA;AACf,QAAM,cAAc,kBAAkB,EAAE,YAAY,IAAI;AACxD,QAAM,UAAsB;AAAA;AAAA,EAAA;AAG5B,QAAM,SAAS,eAAe;AAAA,IAC5B,SAAS,qBAAA;AAAA,IACT,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAA;AAAA,IAAC;AAAA,EACnB,CACD;AAED,SAAO,EAAE,QAAQ,aAAa,YAAY,GAAA;AAC5C;"}
+{"version":3,"file":"appPropsFactory.js","sources":["../../src/appPropsFactory.ts"],"sourcesContent":["import { createBrowserHistory } from '@tanstack/react-router'\nimport { createTRPCClient, httpBatchLink } from '@trpc/client'\nimport { AcDb } from './userDb/AcDb'\nimport type { TRPCRouter } from '@igstack/app-catalog-backend-core'\nimport type { RegisteredRouter } from '@tanstack/react-router'\nimport type { AppProps } from './App'\nimport type { AcPlugin } from './modules/pluginCore/types'\nimport type { AcRouterInitParams } from './types/types'\nimport { createQueryClient } from './api/infra/createQueryClient'\n\nexport interface AppPropsFactoryOptions {\n  /**\n   * How to build the router.\n   *\n   * Injected rather than imported, because the ROUTE TREE belongs to the\n   * deployment. A deployment that composes its own tree declares its own\n   * `declare module … Register`, and importing the core's `createAcRouter`\n   * here would put the core's competing augmentation into that program — a\n   * hard `TS2717`, and `import type` would not help: augmentations are\n   * collected when the program is built.\n   *\n   * Using the core's tree unchanged? Pass `createAcRouter` from\n   * `@igstack/app-catalog-frontend-core/router`.\n   */\n  createRouter: (init: AcRouterInitParams) => RegisteredRouter\n}\n\n// registerSW();\nexport function appPropsFactory({\n  createRouter,\n}: AppPropsFactoryOptions): AppProps {\n  const trpcClient = createTRPCClient<TRPCRouter>({\n    links: [\n      httpBatchLink({\n        url: `${window.location.origin}/api/trpc`,\n      }),\n    ],\n  })\n\n  const db = new AcDb()\n  const queryClient = createQueryClient({ trpcClient, db })\n  const plugins: AcPlugin[] = [\n    // Future plugins can be added here\n  ]\n  const router = createRouter({\n    history: createBrowserHistory(),\n    context: {\n      queryClient,\n      trpcClient,\n      db,\n      plugins,\n      boostrapHealth: {},\n    },\n  })\n\n  return { router, queryClient, trpcClient, db }\n}\n"],"names":[],"mappings":";;;;AA4BO,SAAS,gBAAgB;AAAA,EAC9B;AACF,GAAqC;AACnC,QAAM,aAAa,iBAA6B;AAAA,IAC9C,OAAO;AAAA,MACL,cAAc;AAAA,QACZ,KAAK,GAAG,OAAO,SAAS,MAAM;AAAA,MAAA,CAC/B;AAAA,IAAA;AAAA,EACH,CACD;AAED,QAAM,KAAK,IAAI,KAAA;AACf,QAAM,cAAc,kBAAkB,EAAE,YAAY,IAAI;AACxD,QAAM,UAAsB;AAAA;AAAA,EAAA;AAG5B,QAAM,SAAS,aAAa;AAAA,IAC1B,SAAS,qBAAA;AAAA,IACT,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB,CAAA;AAAA,IAAC;AAAA,EACnB,CACD;AAED,SAAO,EAAE,QAAQ,aAAa,YAAY,GAAA;AAC5C;"}

package/dist/esm/index.d.ts

@@ -1,7 +1,20 @@
 export { appPropsFactory } from './appPropsFactory.js';
+export type { AppPropsFactoryOptions } from './appPropsFactory.js';
+export type { AcRouterContext, AcRouterInitParams } from './types/types.js';
 export { App } from './App.js';
 export type { AppProps } from './App.js';
 export type { AreaIcon, AreasSettings, UiSettings } from './types/uiSettings.js';
 export { DAY_TO_DAY_AREA_KEY, DAY_TO_DAY_TAG, } from './modules/appCatalog/utils/areaGrouping.js';
-export { PwaAutoUpdateProvider, usePwaAutoUpdate } from './modules/pwa.js';
-export type { PwaAutoUpdateOptions, PwaUpdateHandle } from './modules/pwa.js';
+export { PwaAutoUpdateProvider, usePwaAutoUpdate } from './modules/pwa/index.js';
+export type { PwaAutoUpdateOptions, PwaUpdateHandle } from './modules/pwa/index.js';
+export type { AcPlugin, PluginSlots, PluginWrappers, PluginUser, SlotSpec, WrapperSpec, } from './modules/extensions/index.js';
+export type { Resource } from '@igstack/app-catalog-backend-core';
+export { useCatalogResources } from './modules/appCatalog/context/AppCatalogContext.js';
+/**
+ * Escape handling, for a deployment's own overlays.
+ *
+ * Call `useDismissable(close)` in any overlay and Escape dismisses whatever
+ * opened last, across core and deployment layers alike. Nothing needs to know
+ * what else is on screen.
+ */
+export { useDismissable, useDismissStack } from './modules/dismiss/DismissStack.js';

package/dist/esm/index.js

@@ -1,6 +1,8 @@
 import { appPropsFactory } from "./appPropsFactory.js";
 import { App } from "./App.js";
 import { DAY_TO_DAY_AREA_KEY, DAY_TO_DAY_TAG } from "./modules/appCatalog/utils/areaGrouping.js";
+import { useCatalogResources } from "./modules/appCatalog/context/AppCatalogContext.js";
+import { useDismissStack, useDismissable } from "./modules/dismiss/DismissStack.js";
 import { PwaAutoUpdateProvider, usePwaAutoUpdate } from "./modules/pwa/PwaAutoUpdateContext.js";
 export {
   App,
@@ -8,6 +10,9 @@ export {
   DAY_TO_DAY_TAG,
   PwaAutoUpdateProvider,
   appPropsFactory,
+  useCatalogResources,
+  useDismissStack,
+  useDismissable,
   usePwaAutoUpdate
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/internal.d.ts

@@ -5,9 +5,15 @@
  *
  * No stability guarantees: this moves in lockstep with
  * `@igstack/app-catalog-test-kit`, which is its only intended consumer.
+ *
+ * Must stay free of `createAcRouter`. The test kit runs inside a DEPLOYMENT's
+ * test program, which declares its own `Register` augmentation for its own
+ * route tree — and re-exporting `createAcRouter` here would drag the core's
+ * competing augmentation in with it, which is a hard `TS2717`. The router
+ * factory is injected instead; see `setRouterFactory` in the test kit. The
+ * core's own router is published separately, at `/router`.
  */
 export { App } from './App.js';
 export type { AppProps } from './App.js';
 export { AcDb, dbCacheDbKeys } from './userDb/AcDb.js';
-export { createAcRouter } from './util/createAcRouter.js';
 export { SEARCH_STORAGE_KEY, clearSessionState, seedSessionState, } from './modules/appCatalog/hooks/useSessionSyncedState.js';

package/dist/esm/internal.js

@@ -1,13 +1,11 @@
 import { App } from "./App.js";
 import { AcDb, dbCacheDbKeys } from "./userDb/AcDb.js";
-import { createAcRouter } from "./util/createAcRouter.js";
 import { SEARCH_STORAGE_KEY, clearSessionState, seedSessionState } from "./modules/appCatalog/hooks/useSessionSyncedState.js";
 export {
   AcDb,
   App,
   SEARCH_STORAGE_KEY,
   clearSessionState,
-  createAcRouter,
   dbCacheDbKeys,
   seedSessionState
 };

package/dist/esm/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"internal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/esm/modules/appCatalog/context/AppCatalogContext.d.ts

@@ -15,4 +15,21 @@ interface AppCatalogProviderProps {
 }
 export declare function AppCatalogProvider({ children }: AppCatalogProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useAppCatalogContext(): AppCatalogContextIface;
+/**
+ * The catalog, for a deployment that owns its own routes.
+ *
+ * A deployment composing its own route tree has to resolve its own path params
+ * against the catalog — `/app/$slug/…/$account` means nothing until `$account`
+ * is matched to a resource. It needs the resources to do that, and the loading
+ * flag to tell "still fetching" from "no such resource", which is the
+ * difference between a spinner and a redirect.
+ *
+ * Deliberately narrower than `useAppCatalogContext`: persons, groups, tags and
+ * approval methods are the core's own rendering concerns, and publishing them
+ * would make every one of them part of the supported surface.
+ */
+export declare function useCatalogResources(): {
+    resources: Resource[];
+    isLoading: boolean;
+};
 export {};

package/dist/esm/modules/appCatalog/context/AppCatalogContext.js

@@ -1,21 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useQuery } from "@tanstack/react-query";
-import { createContext, useMemo, useEffect, use } from "react";
+import { use, createContext, useMemo, useEffect } from "react";
 import { ApiQueryMagazineAppCatalog } from "../api/ApiQueryMagazineAppCatalog.js";
-import "../ui/context/AppCatalogFiltersContext.js";
-import "@tanstack/react-router";
-import "clsx";
-import "tailwind-merge";
-import "next-themes";
-import "../../../ui/button.js";
-import "../../auth/AuthModalContext.js";
-import "@radix-ui/react-dialog";
-import "lucide-react";
-import "../../config/GlobalConfigContext.js";
-import "../../pluginCore/PluginManagerContext.js";
-import "@radix-ui/react-tooltip";
-import "../../../ui/empty.js";
-import "../ui/pages/AppCatalogPage.js";
 import { useUiSettings } from "../../../context/UiSettingsContext.js";
 import { mergeFrontendBuildId } from "./mergeFrontendBuildId.js";
 const AppCatalogContext = createContext(void 0);
@@ -68,9 +54,14 @@ function useAppCatalogContext() {
   }
   return context;
 }
+function useCatalogResources() {
+  const { resources, isLoadingApps } = useAppCatalogContext();
+  return { resources, isLoading: isLoadingApps };
+}
 export {
   AppCatalogContext,
   AppCatalogProvider,
-  useAppCatalogContext
+  useAppCatalogContext,
+  useCatalogResources
 };
 //# sourceMappingURL=AppCatalogContext.js.map

package/dist/esm/modules/appCatalog/context/AppCatalogContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppCatalogContext.js","sources":["../../../../../src/modules/appCatalog/context/AppCatalogContext.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppVersionInfo,\n  Group,\n  GroupingTagDefinition,\n  Person,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { useQuery } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { createContext, use, useEffect, useMemo } from 'react'\nimport { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'\nimport { useUiSettings } from '~/context/UiSettingsContext'\nimport { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'\n\nexport interface AppCatalogContextIface {\n  resources: Resource[]\n  isLoadingApps: boolean\n  tagsDefinitions: GroupingTagDefinition[]\n  approvalMethods: AppApprovalMethod[]\n  persons: Person[]\n  groups: Group[]\n  versions?: AppVersionInfo\n}\n\nexport const AppCatalogContext = createContext<\n  AppCatalogContextIface | undefined\n>(undefined)\n\ninterface AppCatalogProviderProps {\n  children: ReactNode\n}\n\nexport function AppCatalogProvider({ children }: AppCatalogProviderProps) {\n  const { data, isLoading: isLoadingApps } = useQuery(\n    ApiQueryMagazineAppCatalog.getAppCatalog(),\n  )\n  const uiSettings = useUiSettings()\n\n  const contextValue = useMemo<AppCatalogContextIface>(\n    () => ({\n      resources: data?.resources ?? [],\n      isLoadingApps,\n      tagsDefinitions: data?.tagsDefinitions ?? [],\n      approvalMethods: data?.approvalMethods ?? [],\n      persons: data?.persons ?? [],\n      groups: data?.groups ?? [],\n      versions: mergeFrontendBuildId(\n        data?.versions ?? {},\n        uiSettings.frontendBuildId,\n      ),\n    }),\n    [\n      data?.approvalMethods,\n      data?.resources,\n      data?.tagsDefinitions,\n      data?.persons,\n      data?.groups,\n      data?.versions,\n      uiSettings.frontendBuildId,\n      isLoadingApps,\n    ],\n  )\n\n  // Update document title based on backend version\n  useEffect(() => {\n    if (data?.versions?.backend?.displayName === 'local') {\n      document.title = 'Local'\n    } else {\n      document.title = 'App Catalog'\n    }\n  }, [data?.versions?.backend?.displayName])\n\n  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>\n}\n\nexport function useAppCatalogContext(): AppCatalogContextIface {\n  const context = use(AppCatalogContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogContext must be used within AppCatalogProvider',\n    )\n  }\n  return context\n}\n"],"names":["_b","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,oBAAoB,cAE/B,MAAS;AAMJ,SAAS,mBAAmB,EAAE,YAAqC;;AACxE,QAAM,EAAE,MAAM,WAAW,cAAA,IAAkB;AAAA,IACzC,2BAA2B,cAAA;AAAA,EAAc;AAE3C,QAAM,aAAa,cAAA;AAEnB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,YAAW,6BAAM,cAAa,CAAA;AAAA,MAC9B;AAAA,MACA,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,UAAS,6BAAM,YAAW,CAAA;AAAA,MAC1B,SAAQ,6BAAM,WAAU,CAAA;AAAA,MACxB,UAAU;AAAA,SACR,6BAAM,aAAY,CAAA;AAAA,QAClB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EACF;AAIF,YAAU,MAAM;;AACd,UAAIA,OAAAC,MAAA,6BAAM,aAAN,gBAAAA,IAAgB,YAAhB,gBAAAD,IAAyB,iBAAgB,SAAS;AACpD,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,EAAC,wCAAM,aAAN,mBAAgB,YAAhB,mBAAyB,WAAW,CAAC;AAEzC,SAAO,oBAAC,mBAAA,EAAkB,OAAO,cAAe,SAAA,CAAS;AAC3D;AAEO,SAAS,uBAA+C;AAC7D,QAAM,UAAU,IAAI,iBAAiB;AACrC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;"}
+{"version":3,"file":"AppCatalogContext.js","sources":["../../../../../src/modules/appCatalog/context/AppCatalogContext.tsx"],"sourcesContent":["import type {\n  AppApprovalMethod,\n  AppVersionInfo,\n  Group,\n  GroupingTagDefinition,\n  Person,\n  Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { useQuery } from '@tanstack/react-query'\nimport type { ReactNode } from 'react'\nimport { createContext, use, useEffect, useMemo } from 'react'\nimport { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'\nimport { useUiSettings } from '~/context/UiSettingsContext'\nimport { mergeFrontendBuildId } from '~/modules/appCatalog/context/mergeFrontendBuildId'\n\nexport interface AppCatalogContextIface {\n  resources: Resource[]\n  isLoadingApps: boolean\n  tagsDefinitions: GroupingTagDefinition[]\n  approvalMethods: AppApprovalMethod[]\n  persons: Person[]\n  groups: Group[]\n  versions?: AppVersionInfo\n}\n\nexport const AppCatalogContext = createContext<\n  AppCatalogContextIface | undefined\n>(undefined)\n\ninterface AppCatalogProviderProps {\n  children: ReactNode\n}\n\nexport function AppCatalogProvider({ children }: AppCatalogProviderProps) {\n  const { data, isLoading: isLoadingApps } = useQuery(\n    ApiQueryMagazineAppCatalog.getAppCatalog(),\n  )\n  const uiSettings = useUiSettings()\n\n  const contextValue = useMemo<AppCatalogContextIface>(\n    () => ({\n      resources: data?.resources ?? [],\n      isLoadingApps,\n      tagsDefinitions: data?.tagsDefinitions ?? [],\n      approvalMethods: data?.approvalMethods ?? [],\n      persons: data?.persons ?? [],\n      groups: data?.groups ?? [],\n      versions: mergeFrontendBuildId(\n        data?.versions ?? {},\n        uiSettings.frontendBuildId,\n      ),\n    }),\n    [\n      data?.approvalMethods,\n      data?.resources,\n      data?.tagsDefinitions,\n      data?.persons,\n      data?.groups,\n      data?.versions,\n      uiSettings.frontendBuildId,\n      isLoadingApps,\n    ],\n  )\n\n  // Update document title based on backend version\n  useEffect(() => {\n    if (data?.versions?.backend?.displayName === 'local') {\n      document.title = 'Local'\n    } else {\n      document.title = 'App Catalog'\n    }\n  }, [data?.versions?.backend?.displayName])\n\n  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>\n}\n\nexport function useAppCatalogContext(): AppCatalogContextIface {\n  const context = use(AppCatalogContext)\n  if (!context) {\n    throw new Error(\n      'useAppCatalogContext must be used within AppCatalogProvider',\n    )\n  }\n  return context\n}\n\n/**\n * The catalog, for a deployment that owns its own routes.\n *\n * A deployment composing its own route tree has to resolve its own path params\n * against the catalog — `/app/$slug/…/$account` means nothing until `$account`\n * is matched to a resource. It needs the resources to do that, and the loading\n * flag to tell \"still fetching\" from \"no such resource\", which is the\n * difference between a spinner and a redirect.\n *\n * Deliberately narrower than `useAppCatalogContext`: persons, groups, tags and\n * approval methods are the core's own rendering concerns, and publishing them\n * would make every one of them part of the supported surface.\n */\nexport function useCatalogResources(): {\n  resources: Resource[]\n  isLoading: boolean\n} {\n  const { resources, isLoadingApps } = useAppCatalogContext()\n  return { resources, isLoading: isLoadingApps }\n}\n"],"names":["_b","_a"],"mappings":";;;;;;AAyBO,MAAM,oBAAoB,cAE/B,MAAS;AAMJ,SAAS,mBAAmB,EAAE,YAAqC;;AACxE,QAAM,EAAE,MAAM,WAAW,cAAA,IAAkB;AAAA,IACzC,2BAA2B,cAAA;AAAA,EAAc;AAE3C,QAAM,aAAa,cAAA;AAEnB,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,YAAW,6BAAM,cAAa,CAAA;AAAA,MAC9B;AAAA,MACA,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,kBAAiB,6BAAM,oBAAmB,CAAA;AAAA,MAC1C,UAAS,6BAAM,YAAW,CAAA;AAAA,MAC1B,SAAQ,6BAAM,WAAU,CAAA;AAAA,MACxB,UAAU;AAAA,SACR,6BAAM,aAAY,CAAA;AAAA,QAClB,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF;AAAA,MACE,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,6BAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EACF;AAIF,YAAU,MAAM;;AACd,UAAIA,OAAAC,MAAA,6BAAM,aAAN,gBAAAA,IAAgB,YAAhB,gBAAAD,IAAyB,iBAAgB,SAAS;AACpD,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,EAAC,wCAAM,aAAN,mBAAgB,YAAhB,mBAAyB,WAAW,CAAC;AAEzC,SAAO,oBAAC,mBAAA,EAAkB,OAAO,cAAe,SAAA,CAAS;AAC3D;AAEO,SAAS,uBAA+C;AAC7D,QAAM,UAAU,IAAI,iBAAiB;AACrC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAeO,SAAS,sBAGd;AACA,QAAM,EAAE,WAAW,cAAA,IAAkB,qBAAA;AACrC,SAAO,EAAE,WAAW,WAAW,cAAA;AACjC;"}

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Search, X, ArrowUpRight } from "lucide-react";
-import { useState, use, useEffect, useMemo, useRef, useCallback } from "react";
+import { useState, use, useEffect, useMemo, useDeferredValue, useRef, useCallback } from "react";
 import { cn } from "../../../../lib/utils.js";
 import { useAppClickHistory } from "../../hooks/useAppClickHistory.js";
 import { markdownToPlainText } from "../../utils/markdownToPlainText.js";
@@ -446,7 +446,9 @@ function AppCatalogGrid({
     return [...apps].filter((a) => !promoted.has(a.slug)).sort((a, b) => a.displayName.localeCompare(b.displayName));
   }, [apps, frequent]);
   const browseGroups = useMemo(() => groupByArea(browse), [browse]);
-  const isSearching = searchValue.trim() !== "";
+  const deferredSearch = useDeferredValue(searchValue);
+  const isSearching = deferredSearch.trim() !== "";
+  const isSearchPending = searchValue !== deferredSearch;
   const searchRef = useRef(null);
   useEffect(() => {
     const onKey = (e) => {
@@ -496,16 +498,23 @@ function AppCatalogGrid({
       ] }) })
     ] }),
     isSearching && /* @__PURE__ */ jsx(
-      SearchResultsList,
+      "div",
       {
-        apps: allResources ?? apps,
-        searchValue,
-        onAppClick,
-        onSubClick,
-        onLaunch,
-        onClear: () => onSearchChange(""),
-        keyboardEnabled: !detailOpen,
-        selectedSubSlug
+        className: `transition-opacity ${isSearchPending ? "opacity-60" : ""}`,
+        "aria-busy": isSearchPending || void 0,
+        children: /* @__PURE__ */ jsx(
+          SearchResultsList,
+          {
+            apps: allResources ?? apps,
+            searchValue: deferredSearch,
+            onAppClick,
+            onSubClick,
+            onLaunch,
+            onClear: () => onSearchChange(""),
+            keyboardEnabled: !detailOpen,
+            selectedSubSlug
+          }
+        )
       }
     ),
     !isSearching && /* @__PURE__ */ jsxs(Fragment, { children: [