@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/dist/esm/modules/resourceJump/ui/ResourceJumpMockTable.js

@@ -0,0 +1,180 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, ExternalLinkIcon } from "lucide-react";
+import * as React from "react";
+import { Input } from "../../../ui/input.js";
+import { LinkExternal } from "../../../ui/linkExternal.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../ui/table.js";
+const rows = [
+  { app: "Payment Gateway", version: "v.12311" },
+  {
+    app: "Transaction Logger",
+    version: "v.12311",
+    jump: "[region-01]",
+    depth: 1
+  },
+  {
+    app: "Gateway - Dashboard",
+    version: "v.12311",
+    jump: "[region-01]",
+    depth: 1
+  },
+  {
+    app: "Gateway - Dashboard #",
+    version: "v.12311",
+    jump: "[region-01]",
+    depth: 1
+  },
+  {
+    app: "Gateway - Admin Scripts",
+    version: "v.12311",
+    jump: "[region-01]",
+    depth: 1
+  },
+  { app: "Identity Provider", context: "External", jump: "[global]" },
+  { app: "Customer Portal", version: "v.12312" },
+  {
+    app: "Invoice #",
+    context: "[Derive]",
+    version: "v.12312",
+    jump: "[region-01]",
+    depth: 1
+  },
+  { app: "Inventory API", version: "v.12311", jump: "[region-01]" },
+  { app: "Get Products", version: "v.12311", jump: "[region-01]", depth: 1 },
+  { app: "Message Queue", version: "v.1.6.1", jump: "[region-01]" },
+  {
+    app: "order-aggregator-service",
+    version: "v.1.6.1",
+    jump: "[region-01]",
+    depth: 1
+  },
+  { app: "API Gateway", version: "release-1", jump: "[global]" },
+  {
+    app: "Workflow Engine - Process A",
+    version: "release-1",
+    jump: "[global]",
+    depth: 1
+  },
+  { app: "Log Analytics", version: "-", jump: "[region-01]" },
+  { app: "Request ID Tracker", version: "-", depth: 1 }
+];
+const CASE_ID_STORAGE_KEY = "resourceJump.mock.invoiceId";
+const CASE_ID_FORMAT = /^\d{9}$/;
+function getStoredCaseId() {
+  if (typeof window === "undefined") return "";
+  return window.localStorage.getItem(CASE_ID_STORAGE_KEY) ?? "";
+}
+function ResourceJumpMockTable() {
+  const [caseId, setCaseId] = React.useState(getStoredCaseId);
+  const [setIsSomeAppExpanded, setIsProdLimsExpanded] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(CASE_ID_STORAGE_KEY, caseId);
+  }, [caseId]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { className: "bg-muted/30 text-muted-foreground", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { className: "px-3", children: "App" }),
+      /* @__PURE__ */ jsx(TableHead, { className: "px-3", children: "Context" }),
+      /* @__PURE__ */ jsx(TableHead, { className: "px-3", children: "Version" }),
+      /* @__PURE__ */ jsx(TableHead, { className: "px-3", children: "Jump" })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
+      const depth = row.depth ?? 0;
+      const requiresCaseId = row.app === "Gateway - Dashboard #";
+      const trimmedCaseId = caseId.trim();
+      const caseIdValid = CASE_ID_FORMAT.test(trimmedCaseId);
+      const canJump = requiresCaseId ? caseIdValid : Boolean(row.jump);
+      const href = requiresCaseId ? `https://example.com?invoiceId=${encodeURIComponent(trimmedCaseId)}` : "https://example.com";
+      if (requiresCaseId) {
+        const id = `${row.app}-${row.context ?? ""}-${row.version ?? ""}-${row.jump ?? ""}`;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: { paddingLeft: depth * 16 },
+                className: "block",
+                children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-expanded": setIsSomeAppExpanded,
+                    onClick: () => setIsProdLimsExpanded((v) => !v),
+                    className: "inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors font-medium",
+                    children: [
+                      setIsSomeAppExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsx("span", { children: row.app }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "(Invoice ID required)" })
+                    ]
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: row.context ?? "" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: row.version ?? "" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: canJump ? /* @__PURE__ */ jsxs(
+              LinkExternal,
+              {
+                href,
+                rel: "noreferrer",
+                className: "inline-flex items-center gap-1",
+                children: [
+                  row.jump ?? "Jump",
+                  /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "h-3 w-3" })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              row.jump ?? "",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-xs", children: "(enter Invoice ID)" })
+            ] }) })
+          ] }),
+          setIsSomeAppExpanded ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: 4, className: "px-3 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: caseId,
+                onChange: (e) => setCaseId(e.currentTarget.value),
+                placeholder: "Invoice ID (9 digits)",
+                "aria-invalid": caseId.length > 0 && !caseIdValid
+              }
+            ) }),
+            caseId.length > 0 && !caseIdValid ? /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Invalid Invoice ID format." }) : null
+          ] }) }) }) : null
+        ] }, id);
+      }
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: /* @__PURE__ */ jsx("span", { style: { paddingLeft: depth * 16 }, className: "block", children: canJump ? /* @__PURE__ */ jsxs(
+              LinkExternal,
+              {
+                href,
+                rel: "noreferrer",
+                className: "inline-flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-block h-3 w-3" }),
+                  /* @__PURE__ */ jsx("span", { children: row.app }),
+                  /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "h-3 w-3" })
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-block h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: row.app }),
+              row.jump ? /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "h-3 w-3" }) : null
+            ] }) }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: row.context ?? "" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: row.version ?? "" }),
+            /* @__PURE__ */ jsx(TableCell, { className: "px-3 align-top", children: row.jump ?? "" })
+          ]
+        },
+        `${row.app}-${row.context ?? ""}-${row.version ?? ""}-${row.jump ?? ""}`
+      );
+    }) })
+  ] }) }) });
+}
+export {
+  ResourceJumpMockTable
+};
+//# sourceMappingURL=ResourceJumpMockTable.js.map

package/dist/esm/modules/resourceJump/ui/ResourceJumpMockTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceJumpMockTable.js","sources":["../../../../../src/modules/resourceJump/ui/ResourceJumpMockTable.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight, ExternalLinkIcon } from 'lucide-react'\nimport * as React from 'react'\nimport { Input } from '~/ui/input'\nimport { LinkExternal } from '~/ui/linkExternal'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\n\ntype ResourceJumpMockRow = {\n  app: string\n  context?: string\n  version?: string\n  jump?: string\n  depth?: number\n}\n\nconst rows: Array<ResourceJumpMockRow> = [\n  { app: 'Payment Gateway', version: 'v.12311' },\n  {\n    app: 'Transaction Logger',\n    version: 'v.12311',\n    jump: '[region-01]',\n    depth: 1,\n  },\n  {\n    app: 'Gateway - Dashboard',\n    version: 'v.12311',\n    jump: '[region-01]',\n    depth: 1,\n  },\n  {\n    app: 'Gateway - Dashboard #',\n    version: 'v.12311',\n    jump: '[region-01]',\n    depth: 1,\n  },\n  {\n    app: 'Gateway - Admin Scripts',\n    version: 'v.12311',\n    jump: '[region-01]',\n    depth: 1,\n  },\n\n  { app: 'Identity Provider', context: 'External', jump: '[global]' },\n\n  { app: 'Customer Portal', version: 'v.12312' },\n  {\n    app: 'Invoice #',\n    context: '[Derive]',\n    version: 'v.12312',\n    jump: '[region-01]',\n    depth: 1,\n  },\n\n  { app: 'Inventory API', version: 'v.12311', jump: '[region-01]' },\n  { app: 'Get Products', version: 'v.12311', jump: '[region-01]', depth: 1 },\n\n  { app: 'Message Queue', version: 'v.1.6.1', jump: '[region-01]' },\n  {\n    app: 'order-aggregator-service',\n    version: 'v.1.6.1',\n    jump: '[region-01]',\n    depth: 1,\n  },\n\n  { app: 'API Gateway', version: 'release-1', jump: '[global]' },\n  {\n    app: 'Workflow Engine - Process A',\n    version: 'release-1',\n    jump: '[global]',\n    depth: 1,\n  },\n\n  { app: 'Log Analytics', version: '-', jump: '[region-01]' },\n  { app: 'Request ID Tracker', version: '-', depth: 1 },\n]\n\nconst CASE_ID_STORAGE_KEY = 'resourceJump.mock.invoiceId'\nconst CASE_ID_FORMAT = /^\\d{9}$/\n\nfunction getStoredCaseId() {\n  if (typeof window === 'undefined') return ''\n  return window.localStorage.getItem(CASE_ID_STORAGE_KEY) ?? ''\n}\n\nexport function ResourceJumpMockTable() {\n  const [caseId, setCaseId] = React.useState(getStoredCaseId)\n  const [setIsSomeAppExpanded, setIsProdLimsExpanded] = React.useState(false)\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return\n    window.localStorage.setItem(CASE_ID_STORAGE_KEY, caseId)\n  }, [caseId])\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"w-full overflow-hidden rounded-md border border-border\">\n        <Table>\n          <TableHeader className=\"bg-muted/30 text-muted-foreground\">\n            <TableRow>\n              <TableHead className=\"px-3\">App</TableHead>\n              <TableHead className=\"px-3\">Context</TableHead>\n              <TableHead className=\"px-3\">Version</TableHead>\n              <TableHead className=\"px-3\">Jump</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {rows.map((row) => {\n              const depth = row.depth ?? 0\n              const requiresCaseId = row.app === 'Gateway - Dashboard #'\n              const trimmedCaseId = caseId.trim()\n              const caseIdValid = CASE_ID_FORMAT.test(trimmedCaseId)\n              const canJump = requiresCaseId ? caseIdValid : Boolean(row.jump)\n\n              const href = requiresCaseId\n                ? `https://example.com?invoiceId=${encodeURIComponent(trimmedCaseId)}`\n                : 'https://example.com'\n\n              if (requiresCaseId) {\n                const id = `${row.app}-${row.context ?? ''}-${row.version ?? ''}-${row.jump ?? ''}`\n\n                return (\n                  <React.Fragment key={id}>\n                    <TableRow>\n                      <TableCell className=\"px-3 align-top\">\n                        <span\n                          style={{ paddingLeft: depth * 16 }}\n                          className=\"block\"\n                        >\n                          <button\n                            type=\"button\"\n                            aria-expanded={setIsSomeAppExpanded}\n                            onClick={() => setIsProdLimsExpanded((v) => !v)}\n                            className=\"inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors font-medium\"\n                          >\n                            {setIsSomeAppExpanded ? (\n                              <ChevronDown className=\"h-3 w-3\" />\n                            ) : (\n                              <ChevronRight className=\"h-3 w-3\" />\n                            )}\n                            <span>{row.app}</span>\n                            <span className=\"text-xs text-muted-foreground\">\n                              (Invoice ID required)\n                            </span>\n                          </button>\n                        </span>\n                      </TableCell>\n                      <TableCell className=\"px-3 align-top\">\n                        {row.context ?? ''}\n                      </TableCell>\n                      <TableCell className=\"px-3 align-top\">\n                        {row.version ?? ''}\n                      </TableCell>\n                      <TableCell className=\"px-3 align-top\">\n                        {canJump ? (\n                          <LinkExternal\n                            href={href}\n                            rel=\"noreferrer\"\n                            className=\"inline-flex items-center gap-1\"\n                          >\n                            {row.jump ?? 'Jump'}\n                            <ExternalLinkIcon className=\"h-3 w-3\" />\n                          </LinkExternal>\n                        ) : (\n                          <span className=\"text-muted-foreground\">\n                            {row.jump ?? ''}{' '}\n                            <span className=\"text-xs\">(enter Invoice ID)</span>\n                          </span>\n                        )}\n                      </TableCell>\n                    </TableRow>\n\n                    {setIsSomeAppExpanded ? (\n                      <TableRow>\n                        <TableCell colSpan={4} className=\"px-3 py-3\">\n                          <div className=\"flex flex-col gap-2\">\n                            <div className=\"max-w-xs\">\n                              <Input\n                                value={caseId}\n                                onChange={(e) =>\n                                  setCaseId(e.currentTarget.value)\n                                }\n                                placeholder=\"Invoice ID (9 digits)\"\n                                aria-invalid={caseId.length > 0 && !caseIdValid}\n                              />\n                            </div>\n                            {caseId.length > 0 && !caseIdValid ? (\n                              <div className=\"text-xs text-muted-foreground\">\n                                Invalid Invoice ID format.\n                              </div>\n                            ) : null}\n                          </div>\n                        </TableCell>\n                      </TableRow>\n                    ) : null}\n                  </React.Fragment>\n                )\n              }\n\n              return (\n                <TableRow\n                  key={`${row.app}-${row.context ?? ''}-${row.version ?? ''}-${row.jump ?? ''}`}\n                >\n                  <TableCell className=\"px-3 align-top\">\n                    <span style={{ paddingLeft: depth * 16 }} className=\"block\">\n                      {canJump ? (\n                        <LinkExternal\n                          href={href}\n                          rel=\"noreferrer\"\n                          className=\"inline-flex items-center gap-2\"\n                        >\n                          <span aria-hidden className=\"inline-block h-3 w-3\" />\n                          <span>{row.app}</span>\n                          <ExternalLinkIcon className=\"h-3 w-3\" />\n                        </LinkExternal>\n                      ) : (\n                        <span className=\"inline-flex items-center gap-2 text-muted-foreground\">\n                          <span aria-hidden className=\"inline-block h-3 w-3\" />\n                          <span>{row.app}</span>\n                          {row.jump ? (\n                            <ExternalLinkIcon className=\"h-3 w-3\" />\n                          ) : null}\n                        </span>\n                      )}\n                    </span>\n                  </TableCell>\n                  <TableCell className=\"px-3 align-top\">\n                    {row.context ?? ''}\n                  </TableCell>\n                  <TableCell className=\"px-3 align-top\">\n                    {row.version ?? ''}\n                  </TableCell>\n                  <TableCell className=\"px-3 align-top\">\n                    {row.jump ?? ''}\n                  </TableCell>\n                </TableRow>\n              )\n            })}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/resourceJump/ui/ShareLinkButton.d.ts

@@ -0,0 +1 @@
+export declare function ShareLinkButton(): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/resourceJump/ui/ShareLinkButton.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRouter } from "@tanstack/react-router";
+import { Share2Icon } from "lucide-react";
+import { use } from "react";
+import { EnvironmentContext, useEnvironmentContext } from "../../environment/context/EnvironmentContext.js";
+import { ResourceJumpContext, useResourceJumpContext } from "../context/ResourceJumpContext.js";
+import { Button } from "../../../ui/button.js";
+import { Card, CardContent } from "../../../ui/card.js";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "../../../ui/dialog.js";
+import { Input } from "../../../ui/input.js";
+import { Label } from "../../../ui/label.js";
+import { Link } from "../../../ui/link.js";
+import { getEhToOptions } from "../../../util/route-utils.js";
+function ShareLinkButton() {
+  const maybeEnvContext = use(EnvironmentContext);
+  const maybeResourceJumpContext = use(ResourceJumpContext);
+  if (!maybeEnvContext || !maybeResourceJumpContext) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsxs("form", { children: [
+    /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+      /* @__PURE__ */ jsx(Share2Icon, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { className: "hidden md:block", children: "Share link" })
+    ] }) }),
+    /* @__PURE__ */ jsx(ShareDialogEnv, {})
+  ] }) });
+}
+function ShareDialogEnv() {
+  const { currentEnv } = useEnvironmentContext();
+  const { currentResourceJump } = useResourceJumpContext();
+  const router = useRouter();
+  const fullUrl = new URL(
+    router.buildLocation(
+      getEhToOptions({
+        appId: currentResourceJump == null ? void 0 : currentResourceJump.slug,
+        envId: currentEnv == null ? void 0 : currentEnv.slug
+      })
+    ).href,
+    window.location.origin
+  ).toString();
+  const isEnv = currentResourceJump === void 0;
+  return /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: isEnv ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Share Link to",
+      " ",
+      /* @__PURE__ */ jsx("code", { className: "bg-accent p-1 rounded", children: currentEnv == null ? void 0 : currentEnv.displayName })
+    ] }) : "Share Env-Hopper Link to this page" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "name-1", children: "Formatted URL" }),
+        /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            ...getEhToOptions({
+              appId: currentResourceJump == null ? void 0 : currentResourceJump.slug,
+              envId: currentEnv == null ? void 0 : currentEnv.slug
+            }),
+            children: [
+              currentEnv == null ? void 0 : currentEnv.displayName,
+              " (Env-Hopper)"
+            ]
+          }
+        ) }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "share-raw-url", children: "Raw URL" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "share-raw-url",
+            name: "share-raw-url",
+            defaultValue: fullUrl,
+            onClick: (e) => e.currentTarget.select()
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: "Cancel" }) }) })
+  ] });
+}
+export {
+  ShareLinkButton
+};
+//# sourceMappingURL=ShareLinkButton.js.map

package/dist/esm/modules/resourceJump/ui/ShareLinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareLinkButton.js","sources":["../../../../../src/modules/resourceJump/ui/ShareLinkButton.tsx"],"sourcesContent":["import { useRouter } from '@tanstack/react-router'\nimport { Share2Icon } from 'lucide-react'\nimport { use } from 'react'\nimport {\n    EnvironmentContext,\n    useEnvironmentContext,\n} from '~/modules/environment/context/EnvironmentContext'\nimport {\n    ResourceJumpContext,\n    useResourceJumpContext,\n} from '~/modules/resourceJump/context/ResourceJumpContext'\nimport { Button } from '~/ui/button'\nimport { Card, CardContent } from '~/ui/card'\nimport {\n    Dialog,\n    DialogClose,\n    DialogContent,\n    DialogFooter,\n    DialogHeader,\n    DialogTitle,\n    DialogTrigger,\n} from '~/ui/dialog'\nimport { Input } from '~/ui/input'\nimport { Label } from '~/ui/label'\nimport { Link } from '~/ui/link'\nimport { getEhToOptions } from '~/util/route-utils'\n\nexport function ShareLinkButton() {\n  const maybeEnvContext = use(EnvironmentContext)\n  const maybeResourceJumpContext = use(ResourceJumpContext)\n  if (!maybeEnvContext || !maybeResourceJumpContext) {\n    return null\n  }\n\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">\n            <Share2Icon className=\"w-4 h-4\" />\n            <span className=\"hidden md:block\">Share link</span>\n          </Button>\n        </DialogTrigger>\n        <ShareDialogEnv />\n      </form>\n    </Dialog>\n  )\n}\n\nfunction ShareDialogEnv() {\n  const { currentEnv } = useEnvironmentContext()\n  const { currentResourceJump } = useResourceJumpContext()\n  const router = useRouter()\n\n  const fullUrl = new URL(\n    router.buildLocation(\n      getEhToOptions({\n        appId: currentResourceJump?.slug,\n        envId: currentEnv?.slug,\n      }),\n    ).href,\n    window.location.origin,\n  ).toString()\n\n  const isEnv = currentResourceJump === undefined\n\n  return (\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>\n          {isEnv ? (\n            <>\n              Share Link to{' '}\n              <code className=\"bg-accent p-1 rounded\">\n                {currentEnv?.displayName}\n              </code>\n            </>\n          ) : (\n            'Share Env-Hopper Link to this page'\n          )}\n        </DialogTitle>\n      </DialogHeader>\n      <div className=\"grid gap-4\">\n        {/* <div className=\"flex items-start gap-3\">\n          <Checkbox id=\"share-include-env\" defaultChecked />\n          <div className=\"grid gap-2\">\n            <Label htmlFor=\"share-include-env\">Auto-select environment</Label>\n            <p className=\"text-muted-foreground text-sm\">\n              Use when you want to share the application but not force a\n              specific environment.\n            </p>\n          </div>\n        </div> */}\n\n        <div className=\"grid gap-3\">\n          <Label htmlFor=\"name-1\">Formatted URL</Label>\n          <Card>\n            <CardContent>\n              <Link\n                {...getEhToOptions({\n                  appId: currentResourceJump?.slug,\n                  envId: currentEnv?.slug,\n                })}\n              >\n                {currentEnv?.displayName} (Env-Hopper)\n              </Link>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"grid gap-3\">\n          <Label htmlFor=\"share-raw-url\">Raw URL</Label>\n          <Input\n            id=\"share-raw-url\"\n            name=\"share-raw-url\"\n            defaultValue={fullUrl}\n            onClick={(e) => e.currentTarget.select()}\n          />\n        </div>\n      </div>\n      <DialogFooter>\n        <DialogClose asChild>\n          <Button variant=\"outline\">Cancel</Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2BO,SAAS,kBAAkB;AAChC,QAAM,kBAAkB,IAAI,kBAAkB;AAC9C,QAAM,2BAA2B,IAAI,mBAAmB;AACxD,MAAI,CAAC,mBAAmB,CAAC,0BAA0B;AACjD,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,QAAA,EACC,UAAA,qBAAC,QAAA,EACC,UAAA;AAAA,IAAA,oBAAC,iBAAc,SAAO,MACpB,UAAA,qBAAC,QAAA,EAAO,SAAQ,WACd,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,WAAU,UAAA,CAAU;AAAA,MAChC,oBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA,aAAA,CAAU;AAAA,IAAA,EAAA,CAC9C,EAAA,CACF;AAAA,wBACC,gBAAA,CAAA,CAAe;AAAA,EAAA,EAAA,CAClB,EAAA,CACF;AAEJ;AAEA,SAAS,iBAAiB;AACxB,QAAM,EAAE,WAAA,IAAe,sBAAA;AACvB,QAAM,EAAE,oBAAA,IAAwB,uBAAA;AAChC,QAAM,SAAS,UAAA;AAEf,QAAM,UAAU,IAAI;AAAA,IAClB,OAAO;AAAA,MACL,eAAe;AAAA,QACb,OAAO,2DAAqB;AAAA,QAC5B,OAAO,yCAAY;AAAA,MAAA,CACpB;AAAA,IAAA,EACD;AAAA,IACF,OAAO,SAAS;AAAA,EAAA,EAChB,SAAA;AAEF,QAAM,QAAQ,wBAAwB;AAEtC,8BACG,eAAA,EACC,UAAA;AAAA,IAAA,oBAAC,cAAA,EACC,UAAA,oBAAC,aAAA,EACE,UAAA,QACC,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACc;AAAA,MACd,oBAAC,QAAA,EAAK,WAAU,yBACb,mDAAY,YAAA,CACf;AAAA,IAAA,GACF,IAEA,sCAEJ,GACF;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,cAYb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAM,SAAQ,UAAS,UAAA,iBAAa;AAAA,QACrC,oBAAC,MAAA,EACC,UAAA,oBAAC,aAAA,EACC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAG,eAAe;AAAA,cACjB,OAAO,2DAAqB;AAAA,cAC5B,OAAO,yCAAY;AAAA,YAAA,CACpB;AAAA,YAEA,UAAA;AAAA,cAAA,yCAAY;AAAA,cAAY;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAE7B,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAM,SAAQ,iBAAgB,UAAA,WAAO;AAAA,QACtC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACL,cAAc;AAAA,YACd,SAAS,CAAC,MAAM,EAAE,cAAc,OAAA;AAAA,UAAO;AAAA,QAAA;AAAA,MACzC,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IACA,oBAAC,cAAA,EACC,UAAA,oBAAC,aAAA,EAAY,SAAO,MAClB,UAAA,oBAAC,QAAA,EAAO,SAAQ,WAAU,UAAA,SAAA,CAAM,EAAA,CAClC,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/esm/modules/resourceJump/ui/SmoothSwitcher.d.ts

@@ -0,0 +1,10 @@
+export interface SmoothSwitcherProps {
+    values: Array<{
+        displayName: string;
+        slug: string;
+    }>;
+    selectedValueSlug: string | undefined;
+    onValueSelect: (slug: string) => void;
+    className?: string;
+}
+export declare function SmoothSwitcher({ values, onValueSelect, selectedValueSlug, className, }: SmoothSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/resourceJump/ui/TopQuickJump.d.ts

@@ -0,0 +1 @@
+export declare function TopQuickJump(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/resourceJump/ui/cmdk/AppAutocomplete.d.ts

@@ -0,0 +1,11 @@
+import { TRPCRouter } from '@env-hopper/backend-core';
+import { QueryClient } from '@tanstack/react-query';
+import { TRPCClient } from '@trpc/client';
+import { ResourceJumpLoaderReturn } from '../../types.js';
+export interface ResourceJumpLayoutProps {
+    children: React.ReactNode;
+    loaderData: ResourceJumpLoaderReturn;
+    queryClient: QueryClient;
+    trpcClient: TRPCClient<TRPCRouter>;
+}
+export declare function AppAutoComplete(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/resourceJump/ui/cmdk/CmdKQuickSearchDialog.d.ts

@@ -0,0 +1,5 @@
+export interface CmdKQuickSearchDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function CmdKQuickSearchDialog({ open, onOpenChange, }: CmdKQuickSearchDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/resourceJump/ui/cmdk/CommandPalette.d.ts

@@ -0,0 +1,18 @@
+import { TRPCRouter } from '@env-hopper/backend-core';
+import { QueryClient } from '@tanstack/react-query';
+import { TRPCClient } from '@trpc/client';
+import { Keys } from 'react-hotkeys-hook';
+import { ResourceJumpLoaderReturn } from '../../types.js';
+export interface ResourceJumpLayoutProps {
+    children: React.ReactNode;
+    loaderData: ResourceJumpLoaderReturn;
+    queryClient: QueryClient;
+    trpcClient: TRPCClient<TRPCRouter>;
+}
+export interface CommandPaletteProps {
+    label?: string;
+    cmd?: Keys;
+    shortcutKey?: string;
+    className?: string;
+}
+export declare function CommandPalette({ label, shortcutKey, className, }: CommandPaletteProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/resourceJump/ui/cmdk/CommandPalette.js

@@ -0,0 +1,35 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useHotkeys } from "react-hotkeys-hook";
+import { QuickSearch } from "./QuickSearch.js";
+import { useQuickSearchContext } from "./QuickSearchContext.js";
+import { ShortcutButton } from "../../../../ui/shortcut-button.js";
+function CommandPalette({
+  label,
+  shortcutKey,
+  className
+}) {
+  const { openQuickSearch } = useQuickSearchContext();
+  useHotkeys(
+    shortcutKey !== void 0 ? `ctrl+${shortcutKey}, cmd+${shortcutKey}` : "",
+    (e) => {
+      e.preventDefault();
+      openQuickSearch({ searchMode: "anything" });
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ShortcutButton,
+      {
+        text: label || "Command Palette",
+        onClick: () => openQuickSearch({ searchMode: "anything" }),
+        shortcutKey,
+        className
+      }
+    ),
+    /* @__PURE__ */ jsx(QuickSearch, {})
+  ] });
+}
+export {
+  CommandPalette
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist/esm/modules/resourceJump/ui/cmdk/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../../../../../src/modules/resourceJump/ui/cmdk/CommandPalette.tsx"],"sourcesContent":["import type { TRPCRouter } from '@env-hopper/backend-core'\nimport type { QueryClient } from '@tanstack/react-query'\nimport type { TRPCClient } from '@trpc/client'\nimport type { Keys } from 'react-hotkeys-hook'\nimport { useHotkeys } from 'react-hotkeys-hook'\nimport { QuickSearch } from '~/modules/resourceJump/ui/cmdk/QuickSearch'\nimport { useQuickSearchContext } from '~/modules/resourceJump/ui/cmdk/QuickSearchContext'\nimport { ShortcutButton } from '~/ui/shortcut-button'\nimport type { ResourceJumpLoaderReturn } from '../../types'\n\nexport interface ResourceJumpLayoutProps {\n  children: React.ReactNode\n  loaderData: ResourceJumpLoaderReturn\n  queryClient: QueryClient\n  trpcClient: TRPCClient<TRPCRouter>\n}\n\nexport interface CommandPaletteProps {\n  label?: string\n  cmd?: Keys\n  shortcutKey?: string\n  className?: string\n}\n\nexport function CommandPalette({\n  label,\n  shortcutKey,\n  className,\n}: CommandPaletteProps) {\n  const { openQuickSearch } = useQuickSearchContext()\n\n  useHotkeys(\n    shortcutKey !== undefined ? `ctrl+${shortcutKey}, cmd+${shortcutKey}` : '',\n    (e) => {\n      e.preventDefault()\n      openQuickSearch({ searchMode: 'anything' })\n    },\n  )\n\n  return (\n    <>\n      <ShortcutButton\n        text={label || 'Command Palette'}\n        onClick={() => openQuickSearch({ searchMode: 'anything' })}\n        shortcutKey={shortcutKey}\n        className={className}\n      />\n      <QuickSearch />\n    </>\n  )\n}\n"],"names":[],"mappings":";;;;;AAwBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,EAAE,gBAAA,IAAoB,sBAAA;AAE5B;AAAA,IACE,gBAAgB,SAAY,QAAQ,WAAW,SAAS,WAAW,KAAK;AAAA,IACxE,CAAC,MAAM;AACL,QAAE,eAAA;AACF,sBAAgB,EAAE,YAAY,YAAY;AAAA,IAC5C;AAAA,EAAA;AAGF,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,SAAS,MAAM,gBAAgB,EAAE,YAAY,YAAY;AAAA,QACzD;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,wBAED,aAAA,CAAA,CAAY;AAAA,EAAA,GACf;AAEJ;"}

package/dist/esm/modules/resourceJump/ui/cmdk/EnvAutocomplete.d.ts

@@ -0,0 +1,11 @@
+import { TRPCRouter } from '@env-hopper/backend-core';
+import { QueryClient } from '@tanstack/react-query';
+import { TRPCClient } from '@trpc/client';
+import { ResourceJumpLoaderReturn } from '../../types.js';
+export interface ResourceJumpLayoutProps {
+    children: React.ReactNode;
+    loaderData: ResourceJumpLoaderReturn;
+    queryClient: QueryClient;
+    trpcClient: TRPCClient<TRPCRouter>;
+}
+export declare function EnvAutoComplete(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/resourceJump/ui/cmdk/EnvAutocomplete.js

@@ -0,0 +1,201 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { EarthIcon } from "lucide-react";
+import { useState, useMemo, useCallback, useRef } from "react";
+import { cn } from "../../../../lib/utils.js";
+import { useEnvironmentContext } from "../../../environment/context/EnvironmentContext.js";
+import { makeFuzzySearchIndex, fuzzySearch } from "../../../fuzzyMatchLogic/autoCompleteFilter.js";
+import { ApiQueryMagazineResourceJump } from "../../api/ApiQueryMagazineResourceJump.js";
+import { highlightText } from "./highlightText.js";
+import { useEnvStatistics } from "../../utils/statistics/useEnvStatistics.js";
+import { Autocomplete, AutocompleteInput, AutocompleteClear, AutocompleteTrigger, AutocompletePopup, AutocompleteEmpty, AutocompleteValue, AutocompleteList, AutocompleteItem } from "../../../../ui/autocomplete.js";
+import { InputGroupAddon } from "../../../../ui/input-group.js";
+function selectAll(e) {
+  e.target.select();
+}
+function EnvAutoComplete() {
+  const { environments, currentEnv, setCurrentEnv } = useEnvironmentContext();
+  const { data: envExtended } = useQuery(
+    ApiQueryMagazineResourceJump.getResourceJumpsExtended()
+  );
+  const [searchValue, setSearchValue] = useState((currentEnv == null ? void 0 : currentEnv.slug) ?? "");
+  const searchIndex = useMemo(() => {
+    return makeFuzzySearchIndex({
+      entries: environments
+    });
+  }, [environments]);
+  const favoriteEnvs = useEnvStatistics();
+  const [isPrestine, setPrestine] = useState(true);
+  const filteredItems = useMemo(() => {
+    const searchBy = isPrestine && (currentEnv == null ? void 0 : currentEnv.displayName) === searchValue ? "" : searchValue;
+    return fuzzySearch(searchBy, {
+      index: searchIndex,
+      freqGetter: (slug) => favoriteEnvs[slug] || 0
+    }).map((r) => r.entry);
+  }, [
+    isPrestine,
+    currentEnv == null ? void 0 : currentEnv.displayName,
+    searchValue,
+    searchIndex,
+    favoriteEnvs
+  ]);
+  const onValueChange = useCallback(
+    (value, eventDetails) => {
+      setSearchValue(value);
+      if (eventDetails.reason === "input-change") {
+        setPrestine(false);
+      } else {
+        const maybeFound = environments.find((env) => env.displayName === value);
+        setCurrentEnv(maybeFound == null ? void 0 : maybeFound.slug);
+      }
+    },
+    [environments, setCurrentEnv]
+  );
+  const [open, setOpen] = useState(false);
+  const scrollElementRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    enabled: open,
+    count: filteredItems.length,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: () => 32 + 16 + 8,
+    overscan: 20,
+    paddingStart: 8,
+    paddingEnd: 8,
+    scrollPaddingEnd: 8,
+    scrollPaddingStart: 8
+  });
+  const handleScrollElementRef = useCallback(
+    (element) => {
+      scrollElementRef.current = element;
+      if (element) {
+        virtualizer.measure();
+      }
+    },
+    [virtualizer]
+  );
+  const totalSize = virtualizer.getTotalSize();
+  return /* @__PURE__ */ jsxs(
+    Autocomplete,
+    {
+      items: environments,
+      itemToStringValue: (v) => v.displayName,
+      filteredItems,
+      value: searchValue,
+      onValueChange,
+      openOnInputClick: true,
+      highlightItemOnHover: true,
+      autoHighlight: true,
+      keepHighlight: true,
+      limit: 50,
+      onOpenChange: (o) => {
+        setPrestine(true);
+        setOpen(o);
+      },
+      open,
+      onItemHighlighted: (item, { reason, index }) => {
+        if (!item) {
+          return;
+        }
+        const isStart = index === 0;
+        const isEnd = index === filteredItems.length - 1;
+        const shouldScroll = reason === "none" || reason === "keyboard" && (isStart || isEnd);
+        if (shouldScroll) {
+          queueMicrotask(() => {
+            virtualizer.scrollToIndex(index, { align: isEnd ? "start" : "end" });
+          });
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("label", { children: [
+          "Environment",
+          /* @__PURE__ */ jsxs(
+            AutocompleteInput,
+            {
+              placeholder: "Select Environment...",
+              propsGroup: { className: "border-eh-env-border" },
+              onFocus: selectAll,
+              children: [
+                /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(EarthIcon, { className: "stroke-eh-env-border" }) }),
+                /* @__PURE__ */ jsx(AutocompleteClear, {}),
+                /* @__PURE__ */ jsx(AutocompleteTrigger, {})
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(AutocompletePopup, { children: [
+          /* @__PURE__ */ jsxs(AutocompleteEmpty, { children: [
+            " ",
+            'No results found for "',
+            /* @__PURE__ */ jsx(AutocompleteValue, {}),
+            '"'
+          ] }),
+          /* @__PURE__ */ jsx(AutocompleteList, { children: filteredItems.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "presentation",
+              ref: handleScrollElementRef,
+              style: { "--total-size": `${totalSize}px` },
+              className: "box-border overflow-auto overscroll-contain scroll-py-2 h-[min(22rem,var(--total-size))] max-h-(--available-height)",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "presentation",
+                  style: { height: totalSize },
+                  className: "w-full relative",
+                  children: virtualizer.getVirtualItems().map((virtualItem) => {
+                    const item = filteredItems[virtualItem.index];
+                    if (!item) {
+                      return null;
+                    }
+                    const maybeExt = envExtended == null ? void 0 : envExtended.envs.find(
+                      (e) => e.slug === item.slug
+                    );
+                    return /* @__PURE__ */ jsx(
+                      AutocompleteItem,
+                      {
+                        index: virtualItem.index,
+                        "data-index": virtualItem.index,
+                        ref: virtualizer.measureElement,
+                        value: item,
+                        "aria-setsize": filteredItems.length,
+                        "aria-posinset": virtualItem.index + 1,
+                        style: {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: virtualItem.size,
+                          transform: `translateY(${virtualItem.start}px)`
+                        },
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                            EarthIcon,
+                            {
+                              className: cn("w-4", {
+                                "stroke-eh-env-foreground": item.slug === (currentEnv == null ? void 0 : currentEnv.slug)
+                              })
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5 flex-col", children: [
+                            highlightText(item.displayName, searchValue),
+                            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: (maybeExt == null ? void 0 : maybeExt.description) || "Lisa" })
+                          ] })
+                        ] })
+                      },
+                      virtualItem.key
+                    );
+                  })
+                }
+              )
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  EnvAutoComplete
+};
+//# sourceMappingURL=EnvAutocomplete.js.map