npm - @igstack/app-catalog-frontend-core - Versions diffs - 0.10.1 → 0.12.0 - Mend

@igstack/app-catalog-frontend-core 0.10.1 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (100) hide show

package/dist/esm/__tests__/integration/harness/given.d.ts CHANGED Viewed

@@ -19,4 +19,5 @@ export interface UiTools {
 export declare function cleanupTestResources(): Promise<void>;
 export declare function given(magazine: Magazine, opts?: {
     initialRoute?: string;
+    seedSearch?: string;
 }): Promise<GivenResult>;

package/dist/esm/__tests__/integration/skewWarning.integration.test.d.ts ADDED Viewed

File without changes

package/dist/esm/__tests__/integration/tools/AppDetailTools.d.ts CHANGED Viewed

@@ -26,6 +26,11 @@ export declare class AppDetailTools {
         visible: number;
         names: string[];
     } | null;
+    /**
+     * Read the "How to get access" section text from the detail panel.
+     * Returns null if the section is not present.
+     */
+    getAccessText(): string | null;
     screenshots: {
         /**
          * Click the screenshot preview to open the gallery modal.

package/dist/esm/__tests__/integration/tools/CatalogTools.d.ts CHANGED Viewed

@@ -6,6 +6,8 @@ export declare class CatalogTools {
     private user;
     /**
      * Click an app row by display name.
+     * Works against both the table/grid view and the launcher home (#38), which
+     * renders app rows as buttons rather than a <table>.
      * Throws with list of visible apps if name not found.
      */
     openApp(name: string): Promise<void>;
@@ -20,6 +22,11 @@ export declare class CatalogTools {
      * Skips group header rows (colspan rows).
      */
     getTableData(): TableRow[];
+    /**
+     * The secondary "open in new tab" launch link for a row, by app name.
+     * Returns null if the row has no launch link.
+     */
+    getLaunchLink(name: string): HTMLAnchorElement | null;
     /**
      * Whether the right detail panel is currently visible.
      */
@@ -28,12 +35,19 @@ export declare class CatalogTools {
     isShowDeprecatedChecked(): boolean;
     /** Whether the "showing deprecated matches" fallback notice is visible. */
     hasDeprecatedFallbackNotice(): boolean;
-    /** Whether the "No apps found" empty state is visible. */
+    /** Whether the "No apps found" empty state or search-morph "No results for" is visible. */
     isEmptyStateVisible(): boolean;
     /**
      * Whether the onboarding/welcome card is visible.
      */
     isOnboardingVisible(): boolean;
+    /**
+     * Read app rows from the launcher home (#38): buttons titled "View <name>".
+     * Name is the first `.font-semibold`/`.font-bold` span; description the
+     * `.text-muted-foreground` span. Deduped by name (an app can appear both in
+     * "Your apps" and "Browse all").
+     */
+    private getLauncherRows;
     /**
      * Get the main catalog table (first table on page, skipping sub-resource tables in detail panel).
      */

package/dist/esm/__tests__/modules/appCatalog/utils/resolveHelpers.test.d.ts ADDED Viewed

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

package/dist/esm/modules/appCatalog/hooks/useSessionSyncedState.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * Options for useSessionSyncedState hook
+ */
+export interface UseSessionSyncedStateOptions<T> {
+    /** The sessionStorage key */
+    key: string;
+    /** Default value when the stored value is absent */
+    defaultValue: T;
+    /** Optional decoder to transform the stored string to a state value */
+    decode?: (storedValue: string) => T;
+    /** Optional encoder to transform the state value to a string (return undefined to clear) */
+    encode?: (stateValue: T) => string | undefined;
+}
+/**
+ * Hook for state that persists in `sessionStorage` instead of the URL.
+ *
+ * Why this exists (see #27): the catalog search value used to be
+ * synced to the URL (`?q=`) so it survived the per-route remount of
+ * `AppCatalogFiltersProvider` (#10). But `q` leaked into every shared/bookmarked
+ * app link. Backing the value with `sessionStorage` keeps the #10 guarantee —
+ * the value survives the remount and the auto-navigate to a single match — while
+ * keeping the URL clean.
+ *
+ * Key features vs {@link useUrlSyncedState}:
+ * - Initializes synchronously from `sessionStorage` on mount.
+ * - Writes synchronously in the setter (no async effect), which also removes the
+ *   effect-ordering race #10 fought (a child auto-navigate effect could run
+ *   before the provider's async state->URL sync).
+ * - Never navigates, so it never touches the URL.
+ *
+ * Defensive against environments without a functional `sessionStorage`
+ * (some CI jsdom setups) — falls back to plain in-memory state.
+ */
+export declare function useSessionSyncedState<T>({ key, defaultValue, decode, encode, }: UseSessionSyncedStateOptions<T>): [T, (value: T) => void];
+/**
+ * sessionStorage key backing the catalog search value (#27). Exported so tests
+ * (and any tooling that needs to seed a "returning user" search) reference the
+ * same key as the provider.
+ */
+export declare const SEARCH_STORAGE_KEY = "app-catalog:search";

package/dist/esm/modules/appCatalog/hooks/useSessionSyncedState.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { useState, useCallback } from "react";
+function useSessionSyncedState({
+  key,
+  defaultValue,
+  decode,
+  encode
+}) {
+  const [state, setStateInternal] = useState(() => {
+    try {
+      const stored = globalThis.sessionStorage.getItem(key);
+      if (stored !== null) {
+        return decode ? decode(stored) : stored;
+      }
+    } catch {
+    }
+    return defaultValue;
+  });
+  const setState = useCallback(
+    (value) => {
+      setStateInternal(value);
+      try {
+        const encoded = encode ? encode(value) : value;
+        if (encoded === void 0) {
+          globalThis.sessionStorage.removeItem(key);
+        } else {
+          globalThis.sessionStorage.setItem(key, encoded);
+        }
+      } catch {
+      }
+    },
+    [key, encode]
+  );
+  return [state, setState];
+}
+const SEARCH_STORAGE_KEY = "app-catalog:search";
+export {
+  SEARCH_STORAGE_KEY,
+  useSessionSyncedState
+};
+//# sourceMappingURL=useSessionSyncedState.js.map

package/dist/esm/modules/appCatalog/hooks/useSessionSyncedState.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSessionSyncedState.js","sources":["../../../../../src/modules/appCatalog/hooks/useSessionSyncedState.ts"],"sourcesContent":["import { useCallback, useState } from 'react'\n\n/**\n * Options for useSessionSyncedState hook\n */\nexport interface UseSessionSyncedStateOptions<T> {\n /** The sessionStorage key */\n key: string\n /** Default value when the stored value is absent */\n defaultValue: T\n /** Optional decoder to transform the stored string to a state value */\n decode?: (storedValue: string) => T\n /** Optional encoder to transform the state value to a string (return undefined to clear) */\n encode?: (stateValue: T) => string | undefined\n}\n\n/**\n * Hook for state that persists in `sessionStorage` instead of the URL.\n *\n * Why this exists (see #27): the catalog search value used to be\n * synced to the URL (`?q=`) so it survived the per-route remount of\n * `AppCatalogFiltersProvider` (#10). But `q` leaked into every shared/bookmarked\n * app link. Backing the value with `sessionStorage` keeps the #10 guarantee —\n * the value survives the remount and the auto-navigate to a single match — while\n * keeping the URL clean.\n *\n * Key features vs {@link useUrlSyncedState}:\n * - Initializes synchronously from `sessionStorage` on mount.\n * - Writes synchronously in the setter (no async effect), which also removes the\n * effect-ordering race #10 fought (a child auto-navigate effect could run\n * before the provider's async state->URL sync).\n * - Never navigates, so it never touches the URL.\n *\n * Defensive against environments without a functional `sessionStorage`\n * (some CI jsdom setups) — falls back to plain in-memory state.\n */\nexport function useSessionSyncedState<T>({\n key,\n defaultValue,\n decode,\n encode,\n}: UseSessionSyncedStateOptions<T>): [T, (value: T) => void] {\n const [state, setStateInternal] = useState<T>(() => {\n try {\n // The try/catch is the real guard against a missing/throwing\n // sessionStorage (SSR, locked-down jsdom); the access itself is typed\n // non-null, so no optional chaining is needed here.\n const stored = globalThis.sessionStorage.getItem(key)\n if (stored !== null) {\n return decode ? decode(stored) : (stored as T)\n }\n } catch {\n // sessionStorage unavailable — fall through to the default\n }\n return defaultValue\n })\n\n const setState = useCallback(\n (value: T) => {\n setStateInternal(value)\n try {\n const encoded = encode ? encode(value) : (value as string | undefined)\n if (encoded === undefined) {\n globalThis.sessionStorage.removeItem(key)\n } else {\n globalThis.sessionStorage.setItem(key, encoded)\n }\n } catch {\n // sessionStorage unavailable — state still works in-memory\n }\n },\n [key, encode],\n )\n\n return [state, setState]\n}\n\n/**\n * sessionStorage key backing the catalog search value (#27). Exported so tests\n * (and any tooling that needs to seed a \"returning user\" search) reference the\n * same key as the provider.\n */\nexport const SEARCH_STORAGE_KEY = 'app-catalog:search'\n"],"names":[],"mappings":";AAoCO,SAAS,sBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6D;AAC3D,QAAM,CAAC,OAAO,gBAAgB,IAAI,SAAY,MAAM;AAClD,QAAI;AAIF,YAAM,SAAS,WAAW,eAAe,QAAQ,GAAG;AACpD,UAAI,WAAW,MAAM;AACnB,eAAO,SAAS,OAAO,MAAM,IAAK;AAAA,MACpC;AAAA,IACF,QAAQ;AAAA,IAER;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,WAAW;AAAA,IACf,CAAC,UAAa;AACZ,uBAAiB,KAAK;AACtB,UAAI;AACF,cAAM,UAAU,SAAS,OAAO,KAAK,IAAK;AAC1C,YAAI,YAAY,QAAW;AACzB,qBAAW,eAAe,WAAW,GAAG;AAAA,QAC1C,OAAO;AACL,qBAAW,eAAe,QAAQ,KAAK,OAAO;AAAA,QAChD;AAAA,MACF,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,IACA,CAAC,KAAK,MAAM;AAAA,EAAA;AAGd,SAAO,CAAC,OAAO,QAAQ;AACzB;AAOO,MAAM,qBAAqB;"}

package/dist/esm/modules/appCatalog/ui/components/AccessPrerequisiteChain.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { Resource } from '@igstack/app-catalog-backend-core';
+/**
+ * Two-step (prerequisite) access banner (#38 item D). When the viewed resource
+ * is a child whose ancestor(s) carry an access policy, the domain model says
+ * the user must obtain the parent's access FIRST. That chain is invisible
+ * otherwise, so surface it explicitly as ordered steps:
+ *
+ *   Step 1 — get access to <parent> (e.g. AWS Console via IT Helpdesk)
+ *   Step 2 — get access to THIS resource (contact its owner / access contacts)
+ *
+ * Renders nothing for root resources or children with no access-bearing parent.
+ * `onOpenParent` lets the user jump to the parent's full access instructions.
+ */
+export declare function AccessPrerequisiteChain({ resource, onOpenParent, }: {
+    resource: Resource;
+    onOpenParent?: (parent: Resource) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/appCatalog/ui/components/AccessPrerequisiteChain.js ADDED Viewed

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { KeyRound, ArrowRight } from "lucide-react";
+import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
+import { getAccessPrerequisiteChain } from "../../utils/resolveHelpers.js";
+function AccessPrerequisiteChain({
+  resource,
+  onOpenParent
+}) {
+  const { resources } = useAppCatalogContext();
+  const chain = getAccessPrerequisiteChain(resources, resource);
+  if (chain.length === 0) return null;
+  const steps = [...chain, resource];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4",
+      role: "note",
+      "aria-label": "Access requires prerequisite steps",
+      children: [
+        /* @__PURE__ */ jsxs("h3", { className: "mb-1 flex items-center gap-1.5 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsx(KeyRound, { className: "size-4 text-primary" }),
+          "Two-step access"
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-muted-foreground", children: "This resource is nested — you need access to its parent first, then to the resource itself." }),
+        /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: steps.map((r, i) => {
+          const isLast = i === steps.length - 1;
+          return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5 text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-[11px] font-bold text-primary-foreground", children: i + 1 }),
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Get access to " }),
+              isLast ? /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "this resource" }) : onOpenParent ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onOpenParent(r),
+                  className: "inline-flex items-center gap-1 font-semibold text-primary hover:underline",
+                  children: [
+                    r.displayName,
+                    /* @__PURE__ */ jsx(ArrowRight, { className: "size-3" })
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "font-semibold", children: r.displayName }),
+              !isLast && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " ",
+                "(see its access instructions)"
+              ] }),
+              isLast && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " ",
+                "— details below."
+              ] })
+            ] })
+          ] }, r.slug);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  AccessPrerequisiteChain
+};
+//# sourceMappingURL=AccessPrerequisiteChain.js.map

package/dist/esm/modules/appCatalog/ui/components/AccessPrerequisiteChain.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AccessPrerequisiteChain.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessPrerequisiteChain.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { ArrowRight, KeyRound } from 'lucide-react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { getAccessPrerequisiteChain } from '../../utils/resolveHelpers'\n\n/**\n * Two-step (prerequisite) access banner (#38 item D). When the viewed resource\n * is a child whose ancestor(s) carry an access policy, the domain model says\n * the user must obtain the parent's access FIRST. That chain is invisible\n * otherwise, so surface it explicitly as ordered steps:\n *\n * Step 1 — get access to <parent> (e.g. AWS Console via IT Helpdesk)\n * Step 2 — get access to THIS resource (contact its owner / access contacts)\n *\n * Renders nothing for root resources or children with no access-bearing parent.\n * `onOpenParent` lets the user jump to the parent's full access instructions.\n */\nexport function AccessPrerequisiteChain({\n resource,\n onOpenParent,\n}: {\n resource: Resource\n onOpenParent?: (parent: Resource) => void\n}) {\n const { resources } = useAppCatalogContext()\n const chain = getAccessPrerequisiteChain(resources, resource)\n if (chain.length === 0) return null\n\n // Steps = each prerequisite ancestor (root→nearest), then this resource last.\n const steps = [...chain, resource]\n\n return (\n <div\n className=\"mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4\"\n role=\"note\"\n aria-label=\"Access requires prerequisite steps\"\n >\n <h3 className=\"mb-1 flex items-center gap-1.5 text-sm font-semibold text-foreground\">\n <KeyRound className=\"size-4 text-primary\" />\n Two-step access\n </h3>\n <p className=\"mb-3 text-xs text-muted-foreground\">\n This resource is nested — you need access to its parent first, then to\n the resource itself.\n </p>\n <ol className=\"space-y-2\">\n {steps.map((r, i) => {\n const isLast = i === steps.length - 1\n return (\n <li key={r.slug} className=\"flex items-start gap-2.5 text-sm\">\n <span className=\"mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-[11px] font-bold text-primary-foreground\">\n {i + 1}\n </span>\n <span className=\"min-w-0\">\n <span className=\"text-muted-foreground\">Get access to </span>\n {isLast ? (\n <span className=\"font-semibold\">this resource</span>\n ) : onOpenParent ? (\n <button\n type=\"button\"\n onClick={() => onOpenParent(r)}\n className=\"inline-flex items-center gap-1 font-semibold text-primary hover:underline\"\n >\n {r.displayName}\n <ArrowRight className=\"size-3\" />\n </button>\n ) : (\n <span className=\"font-semibold\">{r.displayName}</span>\n )}\n {!isLast && (\n <span className=\"text-muted-foreground\">\n {' '}\n (see its access instructions)\n </span>\n )}\n {isLast && (\n <span className=\"text-muted-foreground\">\n {' '}\n — details below.\n </span>\n )}\n </span>\n </li>\n )\n })}\n </ol>\n </div>\n )\n}\n"],"names":[],"mappings":";;;;AAiBO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,UAAA,IAAc,qBAAA;AACtB,QAAM,QAAQ,2BAA2B,WAAW,QAAQ;AAC5D,MAAI,MAAM,WAAW,EAAG,QAAO;AAG/B,QAAM,QAAQ,CAAC,GAAG,OAAO,QAAQ;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,UAAA;AAAA,QAAA,qBAAC,MAAA,EAAG,WAAU,wEACZ,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAS,WAAU,sBAAA,CAAsB;AAAA,UAAE;AAAA,QAAA,GAE9C;AAAA,QACA,oBAAC,KAAA,EAAE,WAAU,sCAAqC,UAAA,+FAGlD;AAAA,QACA,oBAAC,QAAG,WAAU,aACX,gBAAM,IAAI,CAAC,GAAG,MAAM;AACnB,gBAAM,SAAS,MAAM,MAAM,SAAS;AACpC,iBACE,qBAAC,MAAA,EAAgB,WAAU,oCACzB,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,WAAU,wHACb,UAAA,IAAI,GACP;AAAA,YACA,qBAAC,QAAA,EAAK,WAAU,WACd,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,kBAAc;AAAA,cACrD,SACC,oBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,gBAAA,CAAa,IAC3C,eACF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM,aAAa,CAAC;AAAA,kBAC7B,WAAU;AAAA,kBAET,UAAA;AAAA,oBAAA,EAAE;AAAA,oBACH,oBAAC,YAAA,EAAW,WAAU,SAAA,CAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA,IAGjC,oBAAC,QAAA,EAAK,WAAU,iBAAiB,YAAE,aAAY;AAAA,cAEhD,CAAC,UACA,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,gBAAA;AAAA,gBAAI;AAAA,cAAA,GAEP;AAAA,cAED,UACC,qBAAC,QAAA,EAAK,WAAU,yBACb,UAAA;AAAA,gBAAA;AAAA,gBAAI;AAAA,cAAA,EAAA,CAEP;AAAA,YAAA,EAAA,CAEJ;AAAA,UAAA,EAAA,GAhCO,EAAE,IAiCX;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js CHANGED Viewed

@@ -90,8 +90,15 @@ function AccessRequestSection({
     }
   }, [accessRequest == null ? void 0 : accessRequest.requestPrompt, copyToClipboard]);
   if (!accessRequest) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-4", children: [
-    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Access Request" }),
+  const isOpen = (approvalMethod == null ? void 0 : approvalMethod.type) === "noAccessRequired";
+  const hasWrittenSteps = Boolean(
+    accessRequest.requestPrompt || accessRequest.comments
+  );
+  const isUndocumented = (approvalMethod == null ? void 0 : approvalMethod.type) === "unknown" || (approvalMethod == null ? void 0 : approvalMethod.type) === "custom" && !hasWrittenSteps;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "How to get access" }),
+    isOpen && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-primary", children: "✓ Open to everyone — no request needed. Just open it." }),
+    isUndocumented && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Access process not documented yet — contact the owner below to find out." }),
     approvalMethod && approvalMethod.type !== "custom" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: approvalMethod.type === "service" && approvalMethod.config.url ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "a",

package/dist/esm/modules/appCatalog/ui/components/AccessRequestSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type {\n AppApprovalMethod,\n Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Button } from '~/ui/button'\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '~/ui/table'\nimport { MarkdownLink } from './MarkdownText'\nimport { PersonBadge } from './PersonBadge'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n app: Resource\n approvalMethods: AppApprovalMethod[]\n}\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(\n type: 'service' \| 'personTeam' \| 'custom' \| 'noAccessRequired' \| 'unknown',\n) {\n switch (type) {\n case 'service':\n return <Bot className=\"size-5 text-primary\" />\n case 'personTeam':\n return <Users className=\"size-5 text-primary\" />\n case 'custom':\n case 'noAccessRequired':\n case 'unknown':\n return <Settings className=\"size-5 text-primary\" />\n }\n}\n\n/*\n Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n /\nfunction useCopyToClipboard() {\n const [copiedId, setCopiedId] = useState<string \| null>(null)\n const [error, setError] = useState<string \| null>(null)\n const timeoutRef = useRef<NodeJS.Timeout \| null>(null)\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n }, [])\n\n const copyToClipboard = useCallback(async (text: string, id: string) => {\n // Clear existing timeout\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n try {\n await navigator.clipboard.writeText(text)\n setCopiedId(id)\n setError(null)\n\n // Set new timeout with cleanup\n timeoutRef.current = setTimeout(() => {\n setCopiedId(null)\n }, COPY_FEEDBACK_DURATION)\n } catch (err) {\n console.error('Failed to copy to clipboard:', err)\n setError('Failed to copy')\n\n // Clear error after duration\n timeoutRef.current = setTimeout(() => {\n setError(null)\n }, COPY_FEEDBACK_DURATION)\n }\n }, [])\n\n return { copiedId, error, copyToClipboard }\n}\n\n/\n Reusable copy button component with accessibility\n /\ninterface CopyButtonProps {\n onCopy: () => void\n isCopied: boolean\n ariaLabel: string\n className?: string\n}\n\nfunction CopyButton({\n onCopy,\n isCopied,\n ariaLabel,\n className,\n}: CopyButtonProps) {\n return (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"sm\"\n onClick={onCopy}\n className={className}\n aria-label={ariaLabel}\n title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n >\n {isCopied ? (\n <>\n <Check className=\"h-3.5 w-3.5 text-green-600\" />\n <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n Copied to clipboard\n </span>\n </>\n ) : (\n <Copy className=\"h-3.5 w-3.5\" />\n )}\n </Button>\n )\n}\n\nexport function AccessRequestSection({\n app,\n approvalMethods,\n}: AccessRequestSectionProps) {\n const { copiedId, copyToClipboard } = useCopyToClipboard()\n const accessRequest = app.accessRequest\n const approvalMethod = approvalMethods.find(\n (m) => m.slug === accessRequest?.approvalMethodSlug,\n )\n\n const handleCopyPrompt = useCallback(() => {\n if (accessRequest?.requestPrompt) {\n copyToClipboard(accessRequest.requestPrompt, 'prompt')\n }\n }, [accessRequest?.requestPrompt, copyToClipboard])\n\n // Early return if no access request\n if (!accessRequest) return null\n\n return (\n <div className=\"mt-6 space-y-4\">\n <h3 className=\"text-sm font-medium\">Access Request</h3>\n\n {/ Approval Method /}\n {approvalMethod && approvalMethod.type !== 'custom' && (\n <div className=\"flex items-center gap-2\">\n {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n <>\n <a\n href={approvalMethod.config.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n title={approvalMethod.config.url}\n >\n <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n <div className=\"font-medium\">{approvalMethod.displayName}</div>\n </a>\n <a\n href={approvalMethod.config.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-muted-foreground hover:text-primary\"\n title={approvalMethod.config.url}\n >\n <ExternalLink className=\"size-4\" />\n </a>\n </>\n ) : (\n <>\n <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n <div className=\"font-medium\">{approvalMethod.displayName}</div>\n </>\n )}\n </div>\n )}\n\n {/ Request Prompt - Inline /}\n {accessRequest.requestPrompt && (\n <div className=\"text-sm inline-flex items-center gap-2\">\n <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n <span className=\"prose prose-sm inline [&>]:inline [&>]:m-0\">\n <ReactMarkdown components={{ a: MarkdownLink }}>\n {accessRequest.requestPrompt}\n </ReactMarkdown>\n </span>\n <CopyButton\n onCopy={handleCopyPrompt}\n isCopied={copiedId === 'prompt'}\n ariaLabel=\"Copy request prompt\"\n className=\"h-6 w-6 p-0 shrink-0\"\n />\n </div>\n )}\n\n {/ Comments /}\n {accessRequest.comments && (\n <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n <ReactMarkdown components={{ a: MarkdownLink }}>\n {accessRequest.comments}\n </ReactMarkdown>\n </div>\n )}\n\n {/ Roles Table /}\n {accessRequest.roles && accessRequest.roles.length > 0 && (\n <div>\n <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n <div className=\"rounded-lg border\">\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead className=\"whitespace-nowrap\">Role</TableHead>\n <TableHead>Description</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {accessRequest.roles.map((role, idx) => (\n <TableRow key={`${role.displayName}-${idx}`}>\n <TableCell className=\"font-medium whitespace-nowrap\">\n {role.displayName}\n </TableCell>\n <TableCell className=\"text-sm text-muted-foreground\">\n {role.description \|\| '—'}\n {role.adminNotes && (\n <div className=\"mt-1 text-xs italic text-muted-foreground/80\">\n Note: {role.adminNotes}\n </div>\n )}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n </div>\n )}\n\n {/ Approvers /}\n {accessRequest.approverPersonSlugs &&\n accessRequest.approverPersonSlugs.length > 0 && (\n <div>\n <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n <div className=\"flex flex-wrap gap-2\">\n {accessRequest.approverPersonSlugs.map((slug) => (\n <PersonBadge key={slug} slug={slug} />\n ))}\n </div>\n </div>\n )}\n\n {/ Documentation URLs /}\n {accessRequest.urls && accessRequest.urls.length > 0 && (\n <div>\n <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n <div className=\"flex flex-col gap-1.5\">\n {accessRequest.urls.map((urlObj, idx) => (\n <a\n key={`${urlObj.url}-${idx}`}\n href={urlObj.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n >\n {urlObj.label \|\| urlObj.url}\n <ExternalLink className=\"size-3\" />\n </a>\n ))}\n </div>\n </div>\n )}\n\n {/ Post-Approval Instructions - Collapsible (secondary info) */}\n {accessRequest.postApprovalInstructions && (\n <Accordion type=\"single\" collapsible>\n <AccordionItem\n value=\"post-approval\"\n className=\"border rounded-lg px-4\"\n >\n <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n Post-Approval Instructions\n </AccordionTrigger>\n <AccordionContent className=\"pb-3\">\n <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n <ReactMarkdown components={{ a: MarkdownLink }}>\n {accessRequest.postApprovalInstructions}\n </ReactMarkdown>\n </div>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"AccessRequestSection.js","sources":["../../../../../../src/modules/appCatalog/ui/components/AccessRequestSection.tsx"],"sourcesContent":["import type {\n AppApprovalMethod,\n Resource,\n} from '@igstack/app-catalog-backend-core'\nimport { Bot, Check, Copy, ExternalLink, Settings, Users } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport { Button } from '~/ui/button'\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from '~/ui/accordion'\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from '~/ui/table'\nimport { MarkdownLink } from './MarkdownText'\nimport { PersonBadge } from './PersonBadge'\n\n// Constants\nconst COPY_FEEDBACK_DURATION = 2000\n\ninterface AccessRequestSectionProps {\n app: Resource\n approvalMethods: AppApprovalMethod[]\n}\n\n// Helper function for approval method icons\nfunction getApprovalMethodIcon(\n type: 'service' \| 'personTeam' \| 'custom' \| 'noAccessRequired' \| 'unknown',\n) {\n switch (type) {\n case 'service':\n return <Bot className=\"size-5 text-primary\" />\n case 'personTeam':\n return <Users className=\"size-5 text-primary\" />\n case 'custom':\n case 'noAccessRequired':\n case 'unknown':\n return <Settings className=\"size-5 text-primary\" />\n }\n}\n\n/*\n Custom hook for handling copy-to-clipboard functionality with feedback\n * Includes proper cleanup to prevent memory leaks\n /\nfunction useCopyToClipboard() {\n const [copiedId, setCopiedId] = useState<string \| null>(null)\n const [error, setError] = useState<string \| null>(null)\n const timeoutRef = useRef<NodeJS.Timeout \| null>(null)\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n }, [])\n\n const copyToClipboard = useCallback(async (text: string, id: string) => {\n // Clear existing timeout\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n try {\n await navigator.clipboard.writeText(text)\n setCopiedId(id)\n setError(null)\n\n // Set new timeout with cleanup\n timeoutRef.current = setTimeout(() => {\n setCopiedId(null)\n }, COPY_FEEDBACK_DURATION)\n } catch (err) {\n console.error('Failed to copy to clipboard:', err)\n setError('Failed to copy')\n\n // Clear error after duration\n timeoutRef.current = setTimeout(() => {\n setError(null)\n }, COPY_FEEDBACK_DURATION)\n }\n }, [])\n\n return { copiedId, error, copyToClipboard }\n}\n\n/\n Reusable copy button component with accessibility\n /\ninterface CopyButtonProps {\n onCopy: () => void\n isCopied: boolean\n ariaLabel: string\n className?: string\n}\n\nfunction CopyButton({\n onCopy,\n isCopied,\n ariaLabel,\n className,\n}: CopyButtonProps) {\n return (\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"sm\"\n onClick={onCopy}\n className={className}\n aria-label={ariaLabel}\n title={isCopied ? 'Copied!' : 'Copy to clipboard'}\n >\n {isCopied ? (\n <>\n <Check className=\"h-3.5 w-3.5 text-green-600\" />\n <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n Copied to clipboard\n </span>\n </>\n ) : (\n <Copy className=\"h-3.5 w-3.5\" />\n )}\n </Button>\n )\n}\n\nexport function AccessRequestSection({\n app,\n approvalMethods,\n}: AccessRequestSectionProps) {\n const { copiedId, copyToClipboard } = useCopyToClipboard()\n const accessRequest = app.accessRequest\n const approvalMethod = approvalMethods.find(\n (m) => m.slug === accessRequest?.approvalMethodSlug,\n )\n\n const handleCopyPrompt = useCallback(() => {\n if (accessRequest?.requestPrompt) {\n copyToClipboard(accessRequest.requestPrompt, 'prompt')\n }\n }, [accessRequest?.requestPrompt, copyToClipboard])\n\n // Early return if no access request\n if (!accessRequest) return null\n\n // Access UX (#31): some methods carry no clickable target — `noAccessRequired`\n // (open), `unknown` (undocumented), and bare `custom` with no comments. The\n // old UI rendered nothing for `custom`, leaving a blank/dead section. Instead\n // surface an explicit, actionable line so the user is never stranded:\n // - open → \"No request needed — just open it.\"\n // - unknown / undocumented custom → route them to the owner (shown below).\n const isOpen = approvalMethod?.type === 'noAccessRequired'\n const hasWrittenSteps = Boolean(\n accessRequest.requestPrompt \|\| accessRequest.comments,\n )\n const isUndocumented =\n approvalMethod?.type === 'unknown' \|\|\n (approvalMethod?.type === 'custom' && !hasWrittenSteps)\n\n return (\n <div className=\"mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4\">\n <h3 className=\"text-sm font-semibold text-foreground\">\n How to get access\n </h3>\n\n {isOpen && (\n <p className=\"text-sm font-medium text-primary\">\n ✓ Open to everyone — no request needed. Just open it.\n </p>\n )}\n\n {isUndocumented && (\n <p className=\"text-sm text-muted-foreground\">\n Access process not documented yet — contact the owner below to find\n out.\n </p>\n )}\n\n {/ Approval Method /}\n {approvalMethod && approvalMethod.type !== 'custom' && (\n <div className=\"flex items-center gap-2\">\n {approvalMethod.type === 'service' && approvalMethod.config.url ? (\n <>\n <a\n href={approvalMethod.config.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"flex items-center gap-2 hover:text-primary transition-colors\"\n title={approvalMethod.config.url}\n >\n <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n <div className=\"font-medium\">{approvalMethod.displayName}</div>\n </a>\n <a\n href={approvalMethod.config.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-muted-foreground hover:text-primary\"\n title={approvalMethod.config.url}\n >\n <ExternalLink className=\"size-4\" />\n </a>\n </>\n ) : (\n <>\n <div>{getApprovalMethodIcon(approvalMethod.type)}</div>\n <div className=\"font-medium\">{approvalMethod.displayName}</div>\n </>\n )}\n </div>\n )}\n\n {/ Request Prompt - Inline /}\n {accessRequest.requestPrompt && (\n <div className=\"text-sm inline-flex items-center gap-2\">\n <span className=\"whitespace-nowrap shrink-0\">Request Prompt:</span>\n <span className=\"prose prose-sm inline [&>]:inline [&>]:m-0\">\n <ReactMarkdown components={{ a: MarkdownLink }}>\n {accessRequest.requestPrompt}\n </ReactMarkdown>\n </span>\n <CopyButton\n onCopy={handleCopyPrompt}\n isCopied={copiedId === 'prompt'}\n ariaLabel=\"Copy request prompt\"\n className=\"h-6 w-6 p-0 shrink-0\"\n />\n </div>\n )}\n\n {/ Comments /}\n {accessRequest.comments && (\n <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n <ReactMarkdown components={{ a: MarkdownLink }}>\n {accessRequest.comments}\n </ReactMarkdown>\n </div>\n )}\n\n {/ Roles Table /}\n {accessRequest.roles && accessRequest.roles.length > 0 && (\n <div>\n <h4 className=\"mb-2 text-sm font-medium\">Available Roles</h4>\n <div className=\"rounded-lg border\">\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead className=\"whitespace-nowrap\">Role</TableHead>\n <TableHead>Description</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {accessRequest.roles.map((role, idx) => (\n <TableRow key={`${role.displayName}-${idx}`}>\n <TableCell className=\"font-medium whitespace-nowrap\">\n {role.displayName}\n </TableCell>\n <TableCell className=\"text-sm text-muted-foreground\">\n {role.description \|\| '—'}\n {role.adminNotes && (\n <div className=\"mt-1 text-xs italic text-muted-foreground/80\">\n Note: {role.adminNotes}\n </div>\n )}\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n </div>\n )}\n\n {/ Approvers /}\n {accessRequest.approverPersonSlugs &&\n accessRequest.approverPersonSlugs.length > 0 && (\n <div>\n <h4 className=\"mb-2 text-sm font-medium\">Approvers</h4>\n <div className=\"flex flex-wrap gap-2\">\n {accessRequest.approverPersonSlugs.map((slug) => (\n <PersonBadge key={slug} slug={slug} />\n ))}\n </div>\n </div>\n )}\n\n {/ Documentation URLs /}\n {accessRequest.urls && accessRequest.urls.length > 0 && (\n <div>\n <h4 className=\"mb-2 text-sm font-medium\">Documentation</h4>\n <div className=\"flex flex-col gap-1.5\">\n {accessRequest.urls.map((urlObj, idx) => (\n <a\n key={`${urlObj.url}-${idx}`}\n href={urlObj.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"text-sm text-muted-foreground hover:text-primary inline-flex items-center gap-1.5\"\n >\n {urlObj.label \|\| urlObj.url}\n <ExternalLink className=\"size-3\" />\n </a>\n ))}\n </div>\n </div>\n )}\n\n {/ Post-Approval Instructions - Collapsible (secondary info) */}\n {accessRequest.postApprovalInstructions && (\n <Accordion type=\"single\" collapsible>\n <AccordionItem\n value=\"post-approval\"\n className=\"border rounded-lg px-4\"\n >\n <AccordionTrigger className=\"text-sm hover:no-underline py-3\">\n Post-Approval Instructions\n </AccordionTrigger>\n <AccordionContent className=\"pb-3\">\n <div className=\"text-sm text-muted-foreground prose prose-sm max-w-none\">\n <ReactMarkdown components={{ a: MarkdownLink }}>\n {accessRequest.postApprovalInstructions}\n </ReactMarkdown>\n </div>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/OnboardingCard.js CHANGED Viewed

@@ -35,7 +35,7 @@ function OnboardingCard({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "pr-10", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold mb-2", children: title }),
+      /* @__PURE__ */ jsx("h2", { className: "font-serif text-lg font-semibold mb-2", children: title }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-3 text-sm", children: description }),
       /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-2 text-xs", children: "Keyboard Navigation" }),

package/dist/esm/modules/appCatalog/ui/components/OnboardingCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OnboardingCard.js","sources":["../../../../../../src/modules/appCatalog/ui/components/OnboardingCard.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, X } from 'lucide-react'\nimport { useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { Button } from '~/ui/button'\nimport { Card } from '~/ui/card'\n\nconst STORAGE_KEY = 'app-catalog-onboarding-dismissed'\n\nexport interface OnboardingCardProps {\n /** Main heading text /\n title?: ReactNode\n /* Description text below the title /\n description?: ReactNode\n}\n\n/\n First-time user onboarding card showing keyboard navigation instructions.\n * Dismissible and persists preference to localStorage.\n */\nexport function OnboardingCard({\n title = 'Welcome to App Catalog',\n description = 'Browse and discover applications available to you. Click on any app to view details, screenshots, and request access if needed.',\n}: OnboardingCardProps = {}) {\n // Initialize from localStorage to avoid hydration flash\n const [isDismissed, setIsDismissed] = useState(() => {\n // Check localStorage on mount\n if (typeof window !== 'undefined') {\n const dismissed = localStorage.getItem(STORAGE_KEY)\n return dismissed === 'true'\n }\n return true // Default to dismissed during SSR\n })\n\n const handleDismiss = () => {\n localStorage.setItem(STORAGE_KEY, 'true')\n setIsDismissed(true)\n }\n\n if (isDismissed) {\n return null\n }\n\n return (\n <Card className=\"p-4 mb-3 relative\">\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"absolute top-2 right-2\"\n onClick={handleDismiss}\n aria-label=\"Dismiss onboarding\"\n >\n <X className=\"h-4 w-4\" />\n </Button>\n\n <div className=\"pr-10\">\n <h2 className=\"text-lg font-~~bold~~ mb-2\">{title}</h2>\n <p className=\"text-muted-foreground mb-3 text-sm\">{description}</p>\n\n <div className=\"bg-muted/50 rounded-lg p-3\">\n <h3 className=\"font-semibold mb-2 text-xs\">Keyboard Navigation</h3>\n <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs flex items-center\">\n <ArrowUp className=\"h-3 w-3\" />\n </kbd>\n <span className=\"text-muted-foreground\">/</span>\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs flex items-center\">\n <ArrowDown className=\"h-3 w-3\" />\n </kbd>\n </div>\n <span className=\"text-muted-foreground\">Navigate apps</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs\">\n Enter\n </kbd>\n <span className=\"text-muted-foreground\">Open screenshots</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs\">\n Esc\n </kbd>\n <span className=\"text-muted-foreground\">Close details</span>\n </div>\n </div>\n </div>\n </div>\n </Card>\n )\n}\n"],"names":[],"mappings":";;;;;AAMA,MAAM,cAAc;AAab,SAAS,eAAe;AAAA,EAC7B,QAAQ;AAAA,EACR,cAAc;AAChB,IAAyB,IAAI;AAE3B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM;AAEnD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,YAAY,aAAa,QAAQ,WAAW;AAClD,aAAO,cAAc;AAAA,IACvB;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,MAAM;AAC1B,iBAAa,QAAQ,aAAa,MAAM;AACxC,mBAAe,IAAI;AAAA,EACrB;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,MAAA,EAAK,WAAU,qBACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QAEX,UAAA,oBAAC,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGzB,qBAAC,OAAA,EAAI,WAAU,SACb,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,~~0BAA0B~~,UAAA,OAAM;AAAA,~~MAC9C~~,oBAAC,KAAA,EAAE,WAAU,sCAAsC,UAAA,aAAY;AAAA,MAE/D,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,8BAA6B,UAAA,uBAAmB;AAAA,QAC9D,qBAAC,OAAA,EAAI,WAAU,uDACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA,oBAAC,SAAI,WAAU,oEACb,8BAAC,SAAA,EAAQ,WAAU,WAAU,EAAA,CAC/B;AAAA,cACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,KAAC;AAAA,cACzC,oBAAC,SAAI,WAAU,oEACb,8BAAC,WAAA,EAAU,WAAU,WAAU,EAAA,CACjC;AAAA,YAAA,GACF;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,gBAAA,CAAa;AAAA,UAAA,GACvD;AAAA,UACA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,kDAAiD,UAAA,SAEhE;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,mBAAA,CAAgB;AAAA,UAAA,GAC1D;AAAA,UACA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,kDAAiD,UAAA,OAEhE;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,gBAAA,CAAa;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"OnboardingCard.js","sources":["../../../../../../src/modules/appCatalog/ui/components/OnboardingCard.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, X } from 'lucide-react'\nimport { useState } from 'react'\nimport type { ReactNode } from 'react'\nimport { Button } from '~/ui/button'\nimport { Card } from '~/ui/card'\n\nconst STORAGE_KEY = 'app-catalog-onboarding-dismissed'\n\nexport interface OnboardingCardProps {\n /** Main heading text /\n title?: ReactNode\n /* Description text below the title /\n description?: ReactNode\n}\n\n/\n First-time user onboarding card showing keyboard navigation instructions.\n * Dismissible and persists preference to localStorage.\n */\nexport function OnboardingCard({\n title = 'Welcome to App Catalog',\n description = 'Browse and discover applications available to you. Click on any app to view details, screenshots, and request access if needed.',\n}: OnboardingCardProps = {}) {\n // Initialize from localStorage to avoid hydration flash\n const [isDismissed, setIsDismissed] = useState(() => {\n // Check localStorage on mount\n if (typeof window !== 'undefined') {\n const dismissed = localStorage.getItem(STORAGE_KEY)\n return dismissed === 'true'\n }\n return true // Default to dismissed during SSR\n })\n\n const handleDismiss = () => {\n localStorage.setItem(STORAGE_KEY, 'true')\n setIsDismissed(true)\n }\n\n if (isDismissed) {\n return null\n }\n\n return (\n <Card className=\"p-4 mb-3 relative\">\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"absolute top-2 right-2\"\n onClick={handleDismiss}\n aria-label=\"Dismiss onboarding\"\n >\n <X className=\"h-4 w-4\" />\n </Button>\n\n <div className=\"pr-10\">\n <h2 className=\"font-serif text-lg font-semibold mb-2\">{title}</h2>\n <p className=\"text-muted-foreground mb-3 text-sm\">{description}</p>\n\n <div className=\"bg-muted/50 rounded-lg p-3\">\n <h3 className=\"font-semibold mb-2 text-xs\">Keyboard Navigation</h3>\n <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n <div className=\"flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs flex items-center\">\n <ArrowUp className=\"h-3 w-3\" />\n </kbd>\n <span className=\"text-muted-foreground\">/</span>\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs flex items-center\">\n <ArrowDown className=\"h-3 w-3\" />\n </kbd>\n </div>\n <span className=\"text-muted-foreground\">Navigate apps</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs\">\n Enter\n </kbd>\n <span className=\"text-muted-foreground\">Open screenshots</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <kbd className=\"px-2 py-1 bg-background border rounded text-xs\">\n Esc\n </kbd>\n <span className=\"text-muted-foreground\">Close details</span>\n </div>\n </div>\n </div>\n </div>\n </Card>\n )\n}\n"],"names":[],"mappings":";;;;;AAMA,MAAM,cAAc;AAab,SAAS,eAAe;AAAA,EAC7B,QAAQ;AAAA,EACR,cAAc;AAChB,IAAyB,IAAI;AAE3B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM;AAEnD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,YAAY,aAAa,QAAQ,WAAW;AAClD,aAAO,cAAc;AAAA,IACvB;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,MAAM;AAC1B,iBAAa,QAAQ,aAAa,MAAM;AACxC,mBAAe,IAAI;AAAA,EACrB;AAEA,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,MAAA,EAAK,WAAU,qBACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAW;AAAA,QAEX,UAAA,oBAAC,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGzB,qBAAC,OAAA,EAAI,WAAU,SACb,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,yCAAyC,UAAA,OAAM;AAAA,MAC7D,oBAAC,KAAA,EAAE,WAAU,sCAAsC,UAAA,aAAY;AAAA,MAE/D,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,8BAA6B,UAAA,uBAAmB;AAAA,QAC9D,qBAAC,OAAA,EAAI,WAAU,uDACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,cAAA,oBAAC,SAAI,WAAU,oEACb,8BAAC,SAAA,EAAQ,WAAU,WAAU,EAAA,CAC/B;AAAA,cACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,KAAC;AAAA,cACzC,oBAAC,SAAI,WAAU,oEACb,8BAAC,WAAA,EAAU,WAAU,WAAU,EAAA,CACjC;AAAA,YAAA,GACF;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,gBAAA,CAAa;AAAA,UAAA,GACvD;AAAA,UACA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,kDAAiD,UAAA,SAEhE;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,mBAAA,CAAgB;AAAA,UAAA,GAC1D;AAAA,UACA,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAA,oBAAC,OAAA,EAAI,WAAU,kDAAiD,UAAA,OAEhE;AAAA,YACA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,gBAAA,CAAa;AAAA,UAAA,EAAA,CACvD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.d.ts CHANGED Viewed

@@ -1,5 +1,11 @@
 interface PersonBadgeProps {
     slug: string;
 }
+/**
+ * Person chip. Clicking it opens a small popover exposing BOTH the full name
+ * and the email, each with its own copy button — so the user picks what to copy
+ * (previously a single button copied only the email). Email also links to
+ * mailto:. Falls back to just the name (no popover) when no email is known.
+ */
 export declare function PersonBadge({ slug }: PersonBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js CHANGED Viewed

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { User, Check, Copy } from "lucide-react";
+import { User, Copy, Mail, Check } from "lucide-react";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { Badge } from "../../../../ui/badge.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../../../ui/popover.js";
 import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
 import "../context/AppCatalogFiltersContext.js";
 import "@tanstack/react-router";
@@ -21,48 +22,111 @@ function PersonBadge({ slug }) {
   const person = getPersonBySlug(persons, slug);
   const displayName = person ? `${person.firstName} ${person.lastName}`.trim() || slug : slug;
   const email = person == null ? void 0 : person.email;
-  return /* @__PURE__ */ jsxs(
-    Badge,
-    {
-      variant: "outline",
-      className: "font-normal inline-flex items-center gap-1",
-      title: email ? `${displayName} (${email})` : displayName,
-      children: [
-        /* @__PURE__ */ jsx(User, { className: "size-3" }),
-        displayName,
-        email && /* @__PURE__ */ jsx(CopyEmailButton, { email })
-      ]
-    }
-  );
+  if (!email) {
+    return /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: "outline",
+        className: "font-normal inline-flex items-center gap-1",
+        title: displayName,
+        children: [
+          /* @__PURE__ */ jsx(User, { className: "size-3" }),
+          displayName
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex",
+        title: `${displayName} · ${email}`,
+        children: /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "outline",
+            className: "font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(User, { className: "size-3" }),
+              displayName,
+              /* @__PURE__ */ jsx(Copy, { className: "size-3 opacity-50" })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-64 p-2", children: [
+      /* @__PURE__ */ jsx(
+        CopyRow,
+        {
+          icon: /* @__PURE__ */ jsx(User, { className: "size-3.5" }),
+          label: "Name",
+          value: displayName
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CopyRow,
+        {
+          icon: /* @__PURE__ */ jsx(Mail, { className: "size-3.5" }),
+          label: "Email",
+          value: email,
+          href: `mailto:${email}`
+        }
+      )
+    ] })
+  ] });
 }
-function CopyEmailButton({ email }) {
+function CopyRow({
+  icon,
+  label,
+  value,
+  href
+}) {
   const [copied, setCopied] = useState(false);
   const timeoutRef = useRef(null);
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
+    },
+    []
+  );
   const handleCopy = useCallback(
     (e) => {
       e.stopPropagation();
-      navigator.clipboard.writeText(email);
+      void navigator.clipboard.writeText(value);
       setCopied(true);
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     },
-    [email]
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: handleCopy,
-      className: "ml-0.5 hover:text-primary transition-colors",
-      title: copied ? "Copied!" : `Copy ${email}`,
-      type: "button",
-      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
-    }
+    [value]
   );
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+      href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: "block truncate text-[13px] text-primary hover:underline",
+          children: value
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px]", children: value })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: "shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors",
+        title: copied ? "Copied!" : `Copy ${label.toLowerCase()}`,
+        "aria-label": `Copy ${label.toLowerCase()}`,
+        children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+      }
+    )
+  ] });
 }
 export {
   PersonBadge

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import { Check, Copy, User } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n slug: string\n}\n\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n const { persons } = useAppCatalogContext()\n const person = getPersonBySlug(persons, slug)\n\n const displayName = person\n ? `${person.firstName} ${person.lastName}`.trim() \|\| slug\n : slug\n\n const email = person?.email\n\n return (\n <Badge\n variant=\"outline\"\n className=\"font-normal inline-flex items-center gap-1\"\n title={~~email~~ ? `${displayName} (${email})` : ~~displayName}~~\n >\n <User className=\"size-3\" />\n {displayName}\n {~~email~~ && <~~CopyEmailButton~~ email={email} />}\n </~~Badge~~>\n )\n}\n\nfunction ~~CopyEmailButton~~({ ~~email~~ }: { ~~email~~: string }) {\n const [copied, setCopied] = useState(false)\n const timeoutRef = useRef<NodeJS.Timeout \| null>(null)\n\n useEffect(() => ~~{\n return~~ () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n }\n }, [])\n\n const handleCopy = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n navigator.clipboard.writeText(~~email~~)\n setCopied(true)\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n },\n [~~email~~],\n )\n\n return (\n <button\n onClick={handleCopy}\n className=\"ml-0.5 hover:text-primary transition-colors\"\n title={copied ? 'Copied!' : `Copy ${~~email~~}`}\n ~~type=\"button~~\"\n >\n {copied ? (\n <Check className=\"size-3 text-green-600\" />\n ) : (\n <Copy className=\"size-3\" />\n )}\n </button>\n )\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;AAUO~~,SAAS,YAAY,EAAE,QAA0B;AACtD,QAAM,EAAE,QAAA,IAAY,qBAAA;AACpB,QAAM,SAAS,gBAAgB,SAAS,IAAI;AAE5C,QAAM,cAAc,SAChB,GAAG,OAAO,SAAS,IAAI,OAAO,QAAQ,GAAG,KAAA,KAAU,OACnD;~~AAEJ~~,QAAM,QAAQ,iCAAQ;~~AAEtB~~,~~SACE~~;AAAA,~~IAAC~~;AAAA,~~IAAA~~;AAAA,~~MACC~~,SAAQ;AAAA,~~MACR~~,WAAU;AAAA,~~MACV~~,OAAO,~~QAAQ~~,GAAG,WAAW,~~KAAK~~,KAAK,~~MAAM~~;AAAA,~~MAE7C~~,UAAA;AAAA,~~QAAA~~,oBAAC,MAAA,EAAK,WAAU,SAAA,CAAS;AAAA,~~QACxB~~;AAAA,~~QACA~~,~~SAAS~~,oBAAC,~~iBAAA~~,~~EAAgB~~,MAAA,~~CAAc~~;AAAA,MAAA;AAAA,~~IAAA~~;AAAA,EAAA;~~AAG/C~~;~~AAEA~~,SAAS,~~gBAAgB~~,~~EAAE~~,~~SAA4B~~;~~AACrD~~,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,aAAa,OAA8B,IAAI;AAErD,~~YAAU~~,MAAM~~;AACd~~,~~WAAO,~~MAAM;~~AACX~~,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAAA,IACzD;AAAA,~~EACF~~,~~GAAG,~~CAAA,~~CAAE~~;~~AAEL~~,QAAM,aAAa;AAAA,IACjB,CAAC,MAAwB;AACvB,QAAE,gBAAA;AACF,~~gBAAU~~,UAAU,UAAU,KAAK;~~AACnC~~,gBAAU,IAAI;AACd,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IAC9D;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGR,SACE;AAAA,~~IAAC~~;AAAA,~~IAAA~~;AAAA,MACC,SAAS;AAAA,~~MACT~~,WAAU;AAAA,~~MACV~~,OAAO,SAAS,YAAY,QAAQ,~~KAAK~~;AAAA,~~MACzC~~,~~MAAK~~;AAAA,~~MAEJ~~,UAAA,6BACE,OAAA,EAAM,WAAU,~~yBAAwB~~,~~IAEzC~~,oBAAC,MAAA,EAAK,WAAU,~~SAAA~~,~~CAAS~~;AAAA,IAAA;AAAA,~~EAAA~~;~~AAIjC~~;"}
1	+ {"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import { Check, Copy, Mail, User } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n slug: string\n}\n\n/*\n Person chip. Clicking it opens a small popover exposing BOTH the full name\n * and the email, each with its own copy button — so the user picks what to copy\n * (previously a single button copied only the email). Email also links to\n * mailto:. Falls back to just the name (no popover) when no email is known.\n /\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n const { persons } = useAppCatalogContext()\n const person = getPersonBySlug(persons, slug)\n\n const displayName = person\n ? `${person.firstName} ${person.lastName}`.trim() \|\| slug\n : slug\n const email = person?.email\n\n // No email → nothing to pick between; render a plain, non-interactive chip.\n if (!email) {\n return (\n <Badge\n variant=\"outline\"\n className=\"font-normal inline-flex items-center gap-1\"\n title={displayName}\n >\n <User className=\"size-3\" />\n {displayName}\n </Badge>\n )\n }\n\n return (\n <Popover>\n <PopoverTrigger asChild>\n <button\n type=\"button\"\n className=\"inline-flex\"\n title={`${displayName} · ${email}`}\n >\n <Badge\n variant=\"outline\"\n className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n >\n <User className=\"size-3\" />\n {displayName}\n <Copy className=\"size-3 opacity-50\" />\n </Badge>\n </button>\n </PopoverTrigger>\n <PopoverContent align=\"start\" className=\"w-64 p-2\">\n <CopyRow\n icon={<User className=\"size-3.5\" />}\n label=\"Name\"\n value={displayName}\n />\n <CopyRow\n icon={<Mail className=\"size-3.5\" />}\n label=\"Email\"\n value={email}\n href={`mailto:${email}`}\n />\n </PopoverContent>\n </Popover>\n )\n}\n\n/* One copyable field (label + value + copy button), value optionally a link. */\nfunction CopyRow({\n icon,\n label,\n value,\n href,\n}: {\n icon: React.ReactNode\n label: string\n value: string\n href?: string\n}) {\n const [copied, setCopied] = useState(false)\n const timeoutRef = useRef<NodeJS.Timeout \| null>(null)\n\n useEffect(\n () => () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n },\n [],\n )\n\n const handleCopy = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation()\n void navigator.clipboard.writeText(value)\n setCopied(true)\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n },\n [value],\n )\n\n return (\n <div className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted\">\n <span className=\"text-muted-foreground shrink-0\">{icon}</span>\n <span className=\"min-w-0 flex-1\">\n <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n {label}\n </span>\n {href ? (\n <a\n href={href}\n className=\"block truncate text-[13px] text-primary hover:underline\"\n >\n {value}\n </a>\n ) : (\n <span className=\"block truncate text-[13px]\">{value}</span>\n )}\n </span>\n <button\n type=\"button\"\n onClick={handleCopy}\n className=\"shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors\"\n title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}\n aria-label={`Copy ${label.toLowerCase()}`}\n >\n {copied ? (\n <Check className=\"size-3.5 text-green-600\" />\n ) : (\n <Copy className=\"size-3.5\" />\n )}\n </button>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/components/SubResourcesSection.d.ts CHANGED Viewed

@@ -1,6 +1,14 @@
 import { Resource } from '@igstack/app-catalog-backend-core';
 interface SubResourcesSectionProps {
     subResources: Resource[];
+    /**
+     * Initial filter text (#38 item C). When the user reached this app by
+     * searching a term that matched a sub-resource, seed the sub-resource filter
+     * with that term so the matched child is revealed instead of buried in a
+     * long list (e.g. searching "biom" → open AWS Console → the biomarker
+     * account is pre-filtered). Only applied when it actually matches a child.
+     */
+    initialSearch?: string;
 }
-export declare function SubResourcesSection({ subResources, }: SubResourcesSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SubResourcesSection({ subResources, initialSearch, }: SubResourcesSectionProps): import("react/jsx-runtime").JSX.Element | null;
 export {};