@cobaltcore-dev/aurora 0.4.0 → 0.6.0

package/README.md

@@ -18,39 +18,31 @@ npm install react react-dom fastify
 
 Aurora has two entry points: `server` and `client`.
 
-### Server (`src/server/server.ts`)
+### Server
 
 ```ts
 import path from "path"
 import { createServer } from "@cobaltcore-dev/aurora/server"
 
-createServer({
-  viteRoot: path.resolve(__dirname, "../.."), // root of your app (where dist/client lives)
-  identityEndpoint: process.env.IDENTITY_ENDPOINT, // OpenStack Keystone URL
-  bffEndpoint: process.env.BFF_ENDPOINT, // tRPC prefix, default "/polaris-bff"
-  defaultEndpointInterface: process.env.DEFAULT_ENDPOINT_INTERFACE, // "public" | "internal"
-  proxyUrl: process.env.GLOBAL_AGENT_HTTP_PROXY, // optional HTTP proxy (dev only)
-  cephRegion: process.env.CEPH_REGION, // Ceph/S3 region for object storage
-  imageMetadataExcludedProperties: process.env.IMAGE_METADATA_EXCLUDED_PROPERTIES, // comma-separated
-  insecureCookies: process.env.INSECURE_COOKIES === "true", // disable Secure flag locally
-}).then((server) => server.listen({ host: "0.0.0.0", port: 4000 }))
+const server = await createServer({
+  identityEndpoint: "https://keystone.example.com/v3/",
+  policyDir: path.resolve(__dirname, "../policies"),
+})
+
+server.listen({ host: "0.0.0.0", port: 4000 })
 ```
 
-### Client (`src/client/App.tsx`)
+### Client
 
 ```tsx
 import { AuroraApp } from "@cobaltcore-dev/aurora/client"
-import "@cobaltcore-dev/aurora/client/style.css" // include once at your app root
 
 export function App() {
   return (
     <AuroraApp
-      bffEndpoint="/polaris-bff" // must match the server's bffEndpoint
-      theme="theme-light" // "theme-light" | "theme-dark"
-      onThemeChange={(theme) => {
-        // called when user toggles — persist however you like
-        localStorage.setItem("theme", theme)
-      }}
+      bffEndpoint="/polaris-bff"
+      theme="theme-light"
+      onThemeChange={(theme) => localStorage.setItem("theme", theme)}
     />
   )
 }
@@ -60,80 +52,84 @@ export function App() {
 
 ### `createServer(config)`
 
-| Option                            | Type      | Default                    | Description                                                      |
-| --------------------------------- | --------- | -------------------------- | ---------------------------------------------------------------- |
-| `identityEndpoint`                | `string`  | —                          | OpenStack Keystone v3 URL (required)                             |
-| `bffEndpoint`                     | `string`  | `"/polaris-bff"`           | URL prefix for all tRPC routes                                   |
-| `viteRoot`                        | `string`  | `__dirname/../../`         | Directory that contains `dist/client/` in production             |
-| `defaultEndpointInterface`        | `string`  | `"public"`                 | OpenStack service catalog interface                              |
-| `proxyUrl`                        | `string`  | —                          | HTTP proxy for OpenStack calls (dev only, ignored in production) |
-| `cephRegion`                      | `string`  | —                          | Ceph RGW region for S3 operations                                |
-| `imageMetadataExcludedProperties` | `string`  | —                          | Comma-separated image metadata keys to hide in the UI            |
-| `cookieName`                      | `string`  | `"dashboard-session-auth"` | Override the session cookie name                                 |
-| `crossDomainCookie`               | `boolean` | `true`                     | Share cookie across subdomains                                   |
-| `insecureCookies`                 | `boolean` | `false`                    | Disable `Secure` flag — only for HTTP-only local dev             |
+| Option                            | Type      | Required | Default                    | Description                                                      |
+| --------------------------------- | --------- | -------- | -------------------------- | ---------------------------------------------------------------- |
+| `identityEndpoint`                | `string`  | yes      | —                          | OpenStack Keystone v3 URL                                        |
+| `policyDir`                       | `string`  | yes      | —                          | Absolute path to a directory of OpenStack policy YAML files      |
+| `bffEndpoint`                     | `string`  | no       | `"/polaris-bff"`           | URL prefix for all tRPC routes                                   |
+| `viteRoot`                        | `string`  | no       | —                          | Directory that contains `dist/client/` in production             |
+| `defaultEndpointInterface`        | `string`  | no       | `"public"`                 | OpenStack service catalog interface                              |
+| `proxyUrl`                        | `string`  | no       | —                          | HTTP proxy for OpenStack calls (dev only, ignored in production) |
+| `cephRegion`                      | `string`  | no       | —                          | Ceph RGW region for S3 operations                                |
+| `imageMetadataExcludedProperties` | `string`  | no       | —                          | Comma-separated image metadata keys to hide in the UI            |
+| `cookieName`                      | `string`  | no       | `"dashboard-session-auth"` | Override the session cookie name                                 |
+| `crossDomainCookie`               | `boolean` | no       | `true`                     | Share cookie across subdomains                                   |
+| `insecureCookies`                 | `boolean` | no       | `false`                    | Disable `Secure` flag — only for HTTP-only local dev             |
 
 ### `<AuroraApp />`
 
-| Prop            | Type                            | Default          | Description                            |
-| --------------- | ------------------------------- | ---------------- | -------------------------------------- |
-| `bffEndpoint`   | `string`                        | `"/polaris-bff"` | Must match the server's `bffEndpoint`  |
-| `theme`         | `"theme-light" \| "theme-dark"` | `"theme-light"`  | Initial theme                          |
-| `onThemeChange` | `(theme) => void`               | —                | Called when the user toggles the theme |
+| Prop            | Type                            | Default          | Description                                        |
+| --------------- | ------------------------------- | ---------------- | -------------------------------------------------- |
+| `bffEndpoint`   | `string`                        | `"/polaris-bff"` | Must match the server's `bffEndpoint`              |
+| `theme`         | `"theme-light" \| "theme-dark"` | `"theme-light"`  | Initial theme                                      |
+| `onThemeChange` | `(theme) => void`               | —                | Called when the user toggles the theme             |
+| `appName`       | `string`                        | `"Aurora"`       | App name shown in the header breadcrumb and logo   |
+| `slots`         | `Slots`                         | —                | Optional UI extension points — see [Slots](#slots) |
 
-## Environment variables
+## Slots
 
-Your app reads these from `.env` and passes them to `createServer()`. Aurora itself never reads environment variables.
+Slots let you inject your own React components into specific locations inside `AuroraApp` without forking the package. Each slot receives an `auroraContext` object with a `client` (tRPC client) for making API calls.
 
-```env
-IDENTITY_ENDPOINT="https://keystone.example.com/v3/"
-DEFAULT_ENDPOINT_INTERFACE="public"
-BFF_ENDPOINT="/polaris-bff"
-PORT="4000"
+```tsx
+import type { SlotProps } from "@cobaltcore-dev/aurora/client"
 
-# Object storage (optional)
-CEPH_REGION="ceph-objectstore-st1-region-1"
+function MyLogo(_props: SlotProps) {
+  return <img src="/my-logo.svg" alt="My App" style={{ height: "1.5rem" }} />
+}
 
-# Local dev only
-INSECURE_COOKIES=true
-# GLOBAL_AGENT_HTTP_PROXY=http://localhost:8888
-```
+function MyBanner({ auroraContext }: SlotProps) {
+  // auroraContext.client gives you access to the tRPC API
+  return <div>Custom sidebar content</div>
+}
 
-The `VITE_BFF_ENDPOINT` variable (prefixed with `VITE_`) is read by Vite and passed to the client:
+function MyFooter(_props: SlotProps) {
+  return (
+    <footer>
+      <a href="/imprint">Imprint</a> · <a href="/privacy">Privacy</a>
+    </footer>
+  )
+}
 
-```env
-VITE_BFF_ENDPOINT="/polaris-bff"
+;<AuroraApp
+  slots={{
+    logo: MyLogo,
+    sideNavBanner: MyBanner,
+    pageFooter: MyFooter,
+  }}
+/>
 ```
 
-```tsx
-<AuroraApp bffEndpoint={import.meta.env.VITE_BFF_ENDPOINT} />
-```
+### Available slots
 
-## Vite config
+| Slot            | Location                                        | Renders in shadow DOM |
+| --------------- | ----------------------------------------------- | --------------------- |
+| `logo`          | Page header, replacing the default Aurora logo  | No                    |
+| `sideNavBanner` | Bottom of the project side navigation           | Yes                   |
+| `pageFooter`    | Page footer, replacing the default empty footer | No                    |
 
-In development, point Vite at your own server plugin. In production no extra plugins are needed — aurora ships pre-built CSS and assets.
+**Shadow DOM isolation:** Slots rendered in a shadow DOM cannot inherit styles from the host page. If your slot component uses a CSS framework, inject the styles inline:
 
-```js
-// vite.config.mjs
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react-swc"
-import viteFastify from "@fastify/vite/plugin"
-
-export default defineConfig(({ mode }) => ({
-  root: "./src/client",
-  build: { outDir: "../../dist/client" },
-  plugins: [mode !== "production" && viteFastify(), react()],
-}))
-```
-
-## Running the app
-
-```bash
-# Development (hot-reload)
-tsx watch --env-file=.env src/server/server.ts
+```tsx
+import styles from "my-lib/styles.css?inline"
 
-# Production
-NODE_ENV=production tsx --env-file=.env src/server/server.ts
+function MyBanner(_props: SlotProps) {
+  return (
+    <>
+      <style>{styles}</style>
+      <div>...</div>
+    </>
+  )
+}
 ```
 
 ## License

package/dist/client/AuroraApp.d.ts

@@ -1,17 +1,32 @@
 import { FC } from 'react';
 import { TrpcClient } from './trpcClient';
+/** Context object passed to every slot component. */
 export type SlotProps = {
     auroraContext: {
+        /** tRPC client for making API calls to the Aurora BFF. */
         client: TrpcClient;
     };
 };
+/** Named extension points where consumers can inject their own React components. */
 export type Slots = {
+    /** Replaces the default Aurora logo in the page header. Renders outside shadow DOM — inherits header styles. */
+    logo?: FC<SlotProps>;
+    /** Rendered at the bottom of the project side navigation. Renders inside a shadow DOM. */
     sideNavBanner?: FC<SlotProps>;
+    /** Replaces the default page footer. Renders outside shadow DOM — inherits page styles. */
+    pageFooter?: FC<SlotProps>;
 };
+/** Props for the top-level `<AuroraApp />` component. */
 export type AuroraAppProps = {
+    /** Initial theme. Defaults to `"theme-light"`. */
     theme?: "theme-dark" | "theme-light";
+    /** URL prefix for all tRPC routes. Must match the server's `bffEndpoint`. Defaults to `"/polaris-bff"`. */
     bffEndpoint?: string;
+    /** Called when the user toggles the theme. Use this to persist the selection. */
     onThemeChange?: (theme: "theme-dark" | "theme-light") => void;
+    /** Optional UI extension points. */
     slots?: Slots;
+    /** App name shown in the header breadcrumb and as the default logo title. Defaults to `"Aurora"`. */
+    appName?: string;
 };
 export declare const AuroraApp: FC<AuroraAppProps>;

package/dist/client/{AuthProvider-D-5Jpa6F.mjs → AuthProvider-Co4d0WzB.mjs}

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import t, { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
 import { useRouter as o } from "@tanstack/react-router";
 //#region src/client/store/AuthProvider.tsx
-var s = /* @__PURE__ */ t.createContext(null), c = 3600 * 1e3;
+var s = /*#__PURE__*/ t.createContext(null), c = 3600 * 1e3;
 function l({ children: l }) {
 	let u = o(), [d, f] = t.useState(null), [p, m] = t.useState(void 0), [h, g] = t.useState(void 0), [_, v] = a(!1), [y, b] = a(void 0), x = i(null), S = i(null), C = !!d, w = n(() => {
 		x.current &&= (clearTimeout(x.current), null);
@@ -74,7 +74,7 @@ function l({ children: l }) {
 		C,
 		O,
 		T
-	]), /* @__PURE__ */ e(s.Provider, {
+	]), /*#__PURE__*/ e(s.Provider, {
 		value: {
 			isAuthenticated: C,
 			user: d,
@@ -97,4 +97,4 @@ function u() {
 //#endregion
 export { u as n, l as t };
 
-//# sourceMappingURL=AuthProvider-D-5Jpa6F.mjs.map
+//# sourceMappingURL=AuthProvider-Co4d0WzB.mjs.map

package/dist/client/{AuthProvider-D-5Jpa6F.mjs.map → AuthProvider-Co4d0WzB.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"AuthProvider-D-5Jpa6F.mjs","names":["React","useEffect","useRef","useCallback","useState","useRouter","AuthContext","createContext","INACTIVITY_TIMEOUT","AuthProvider","children","router","user","setUser","expiresAt","setExpiresAt","undefined","logoutReason","setLogoutReason","showInactivityModal","setShowInactivityModal","redirectAfterModal","setRedirectAfterModal","logoutTimerRef","inactivityTimerRef","isAuthenticated","clearLogoutTimer","current","clearTimeout","clearInactivityTimer","closeInactivityModal","navigate","to","search","redirect","logout","reason","currentPath","window","location","pathname","startsWith","invalidate","resetInactivityTimer","setTimeout","login","expires_at","expiration","Date","timeUntilExpiry","getTime","now","events","handleActivity","forEach","event","document","addEventListener","removeEventListener","Provider","value","useAuth","context","useContext","Error"],"sources":["../../src/client/store/AuthProvider.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from \"react\"\nimport { TokenData } from \"../../server/Authentication/types/models\"\nimport { useRouter } from \"@tanstack/react-router\"\n\nexport type User = TokenData[\"user\"] | null\n\nexport interface AuthContext {\n  isAuthenticated: boolean\n  login: (user: User, expires_at?: string) => Promise<void>\n  logout: (reason?: \"inactive\" | \"expired\" | \"manual\") => Promise<void>\n  user?: User\n  expiresAt?: Date\n  logoutReason?: \"inactive\" | \"expired\" | \"manual\"\n  showInactivityModal: boolean\n  closeInactivityModal: () => void\n  redirectAfterModal?: string\n}\n\nconst AuthContext = React.createContext<AuthContext | null>(null)\n\nconst INACTIVITY_TIMEOUT = 60 * 60 * 1000 // 60 minutes\n\nexport function AuthProvider({ children }: { children: React.ReactNode }) {\n  const router = useRouter()\n  const [user, setUser] = React.useState<User | null>(null)\n  const [expiresAt, setExpiresAt] = React.useState<Date | undefined>(undefined)\n  const [logoutReason, setLogoutReason] = React.useState<\"inactive\" | \"expired\" | \"manual\" | undefined>(undefined)\n  const [showInactivityModal, setShowInactivityModal] = useState(false)\n  const [redirectAfterModal, setRedirectAfterModal] = useState<string | undefined>(undefined)\n\n  const logoutTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const inactivityTimerRef = useRef<NodeJS.Timeout | null>(null)\n\n  const isAuthenticated = !!user\n\n  const clearLogoutTimer = useCallback(() => {\n    if (logoutTimerRef.current) {\n      clearTimeout(logoutTimerRef.current)\n      logoutTimerRef.current = null\n    }\n  }, [])\n\n  const clearInactivityTimer = useCallback(() => {\n    if (inactivityTimerRef.current) {\n      clearTimeout(inactivityTimerRef.current)\n      inactivityTimerRef.current = null\n    }\n  }, [])\n\n  const closeInactivityModal = useCallback(() => {\n    setShowInactivityModal(false)\n\n    router.navigate({\n      to: \"/\",\n      search: redirectAfterModal ? { redirect: redirectAfterModal } : undefined,\n    })\n  }, [redirectAfterModal])\n\n  const logout = useCallback(\n    async (reason: \"inactive\" | \"expired\" | \"manual\" = \"manual\") => {\n      clearLogoutTimer()\n      clearInactivityTimer()\n\n      setUser(null)\n      setExpiresAt(undefined)\n      setLogoutReason(reason)\n\n      // For inactive/expired: Show modal instead of direct navigation\n      if (reason === \"inactive\" || reason === \"expired\") {\n        const currentPath = window.location.pathname + window.location.search\n        if (currentPath && currentPath.startsWith(\"/\")) {\n          setRedirectAfterModal(currentPath)\n        }\n\n        setShowInactivityModal(true)\n      } else {\n        // Manual logout: direct navigation\n        router.invalidate()\n      }\n    },\n    [clearLogoutTimer, clearInactivityTimer]\n  )\n\n  const resetInactivityTimer = useCallback(() => {\n    if (!isAuthenticated) return\n\n    clearInactivityTimer()\n\n    inactivityTimerRef.current = setTimeout(() => {\n      logout(\"inactive\")\n    }, INACTIVITY_TIMEOUT)\n  }, [isAuthenticated, clearInactivityTimer, logout])\n\n  const login = useCallback(\n    async (user: User, expires_at?: string) => {\n      setUser(user)\n      setLogoutReason(undefined)\n      setShowInactivityModal(false)\n      setRedirectAfterModal(undefined)\n\n      if (expires_at) {\n        const expiration = new Date(expires_at)\n        setExpiresAt(expiration)\n      } else {\n        setExpiresAt(undefined)\n      }\n\n      resetInactivityTimer()\n    },\n    [resetInactivityTimer]\n  )\n\n  useEffect(() => {\n    clearLogoutTimer()\n\n    if (user && expiresAt) {\n      const timeUntilExpiry = expiresAt.getTime() - Date.now()\n\n      if (timeUntilExpiry <= 0) {\n        logout(\"expired\")\n        return\n      }\n\n      logoutTimerRef.current = setTimeout(() => {\n        logout(\"expired\")\n      }, timeUntilExpiry)\n    }\n\n    return () => {\n      clearLogoutTimer()\n    }\n  }, [user, expiresAt, logout, clearLogoutTimer])\n\n  useEffect(() => {\n    if (!isAuthenticated) {\n      clearInactivityTimer()\n      return\n    }\n\n    const events = [\"mousedown\", \"mousemove\", \"keypress\", \"scroll\", \"touchstart\", \"click\"]\n\n    const handleActivity = () => {\n      resetInactivityTimer()\n    }\n\n    resetInactivityTimer()\n\n    events.forEach((event) => {\n      document.addEventListener(event, handleActivity, true)\n    })\n\n    return () => {\n      clearInactivityTimer()\n      events.forEach((event) => {\n        document.removeEventListener(event, handleActivity, true)\n      })\n    }\n  }, [isAuthenticated, resetInactivityTimer, clearInactivityTimer])\n\n  return (\n    <AuthContext.Provider\n      value={{\n        isAuthenticated,\n        user,\n        login,\n        logout,\n        expiresAt,\n        logoutReason,\n        showInactivityModal,\n        closeInactivityModal,\n        redirectAfterModal,\n      }}\n    >\n      {children}\n    </AuthContext.Provider>\n  )\n}\n\nexport function useAuth() {\n  const context = React.useContext(AuthContext)\n  if (!context) {\n    throw new Error(\"useAuth must be used within an AuthProvider\")\n  }\n  return context\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuthProvider-Co4d0WzB.mjs","names":["React","useEffect","useRef","useCallback","useState","useRouter","AuthContext","createContext","INACTIVITY_TIMEOUT","AuthProvider","children","router","user","setUser","expiresAt","setExpiresAt","undefined","logoutReason","setLogoutReason","showInactivityModal","setShowInactivityModal","redirectAfterModal","setRedirectAfterModal","logoutTimerRef","inactivityTimerRef","isAuthenticated","clearLogoutTimer","current","clearTimeout","clearInactivityTimer","closeInactivityModal","navigate","to","search","redirect","logout","reason","currentPath","window","location","pathname","startsWith","invalidate","resetInactivityTimer","setTimeout","login","expires_at","expiration","Date","timeUntilExpiry","getTime","now","events","handleActivity","forEach","event","document","addEventListener","removeEventListener","Provider","value","useAuth","context","useContext","Error"],"sources":["../../src/client/store/AuthProvider.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from \"react\"\nimport { TokenData } from \"../../server/Authentication/types/models\"\nimport { useRouter } from \"@tanstack/react-router\"\n\nexport type User = TokenData[\"user\"] | null\n\nexport interface AuthContext {\n  isAuthenticated: boolean\n  login: (user: User, expires_at?: string) => Promise<void>\n  logout: (reason?: \"inactive\" | \"expired\" | \"manual\") => Promise<void>\n  user?: User\n  expiresAt?: Date\n  logoutReason?: \"inactive\" | \"expired\" | \"manual\"\n  showInactivityModal: boolean\n  closeInactivityModal: () => void\n  redirectAfterModal?: string\n}\n\nconst AuthContext = React.createContext<AuthContext | null>(null)\n\nconst INACTIVITY_TIMEOUT = 60 * 60 * 1000 // 60 minutes\n\nexport function AuthProvider({ children }: { children: React.ReactNode }) {\n  const router = useRouter()\n  const [user, setUser] = React.useState<User | null>(null)\n  const [expiresAt, setExpiresAt] = React.useState<Date | undefined>(undefined)\n  const [logoutReason, setLogoutReason] = React.useState<\"inactive\" | \"expired\" | \"manual\" | undefined>(undefined)\n  const [showInactivityModal, setShowInactivityModal] = useState(false)\n  const [redirectAfterModal, setRedirectAfterModal] = useState<string | undefined>(undefined)\n\n  const logoutTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const inactivityTimerRef = useRef<NodeJS.Timeout | null>(null)\n\n  const isAuthenticated = !!user\n\n  const clearLogoutTimer = useCallback(() => {\n    if (logoutTimerRef.current) {\n      clearTimeout(logoutTimerRef.current)\n      logoutTimerRef.current = null\n    }\n  }, [])\n\n  const clearInactivityTimer = useCallback(() => {\n    if (inactivityTimerRef.current) {\n      clearTimeout(inactivityTimerRef.current)\n      inactivityTimerRef.current = null\n    }\n  }, [])\n\n  const closeInactivityModal = useCallback(() => {\n    setShowInactivityModal(false)\n\n    router.navigate({\n      to: \"/\",\n      search: redirectAfterModal ? { redirect: redirectAfterModal } : undefined,\n    })\n  }, [redirectAfterModal])\n\n  const logout = useCallback(\n    async (reason: \"inactive\" | \"expired\" | \"manual\" = \"manual\") => {\n      clearLogoutTimer()\n      clearInactivityTimer()\n\n      setUser(null)\n      setExpiresAt(undefined)\n      setLogoutReason(reason)\n\n      // For inactive/expired: Show modal instead of direct navigation\n      if (reason === \"inactive\" || reason === \"expired\") {\n        const currentPath = window.location.pathname + window.location.search\n        if (currentPath && currentPath.startsWith(\"/\")) {\n          setRedirectAfterModal(currentPath)\n        }\n\n        setShowInactivityModal(true)\n      } else {\n        // Manual logout: direct navigation\n        router.invalidate()\n      }\n    },\n    [clearLogoutTimer, clearInactivityTimer]\n  )\n\n  const resetInactivityTimer = useCallback(() => {\n    if (!isAuthenticated) return\n\n    clearInactivityTimer()\n\n    inactivityTimerRef.current = setTimeout(() => {\n      logout(\"inactive\")\n    }, INACTIVITY_TIMEOUT)\n  }, [isAuthenticated, clearInactivityTimer, logout])\n\n  const login = useCallback(\n    async (user: User, expires_at?: string) => {\n      setUser(user)\n      setLogoutReason(undefined)\n      setShowInactivityModal(false)\n      setRedirectAfterModal(undefined)\n\n      if (expires_at) {\n        const expiration = new Date(expires_at)\n        setExpiresAt(expiration)\n      } else {\n        setExpiresAt(undefined)\n      }\n\n      resetInactivityTimer()\n    },\n    [resetInactivityTimer]\n  )\n\n  useEffect(() => {\n    clearLogoutTimer()\n\n    if (user && expiresAt) {\n      const timeUntilExpiry = expiresAt.getTime() - Date.now()\n\n      if (timeUntilExpiry <= 0) {\n        logout(\"expired\")\n        return\n      }\n\n      logoutTimerRef.current = setTimeout(() => {\n        logout(\"expired\")\n      }, timeUntilExpiry)\n    }\n\n    return () => {\n      clearLogoutTimer()\n    }\n  }, [user, expiresAt, logout, clearLogoutTimer])\n\n  useEffect(() => {\n    if (!isAuthenticated) {\n      clearInactivityTimer()\n      return\n    }\n\n    const events = [\"mousedown\", \"mousemove\", \"keypress\", \"scroll\", \"touchstart\", \"click\"]\n\n    const handleActivity = () => {\n      resetInactivityTimer()\n    }\n\n    resetInactivityTimer()\n\n    events.forEach((event) => {\n      document.addEventListener(event, handleActivity, true)\n    })\n\n    return () => {\n      clearInactivityTimer()\n      events.forEach((event) => {\n        document.removeEventListener(event, handleActivity, true)\n      })\n    }\n  }, [isAuthenticated, resetInactivityTimer, clearInactivityTimer])\n\n  return (\n    <AuthContext.Provider\n      value={{\n        isAuthenticated,\n        user,\n        login,\n        logout,\n        expiresAt,\n        logoutReason,\n        showInactivityModal,\n        closeInactivityModal,\n        redirectAfterModal,\n      }}\n    >\n      {children}\n    </AuthContext.Provider>\n  )\n}\n\nexport function useAuth() {\n  const context = React.useContext(AuthContext)\n  if (!context) {\n    throw new Error(\"useAuth must be used within an AuthProvider\")\n  }\n  return context\n}\n"],"mappings":"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"}

package/dist/client/{ContentHeader-BXZoN3B9.mjs → ContentHeader-kx1Th5Sq.mjs}

@@ -1,81 +1,81 @@
-import { A as e, P as t, Z as n, i as r, j as i, nt as a, rt as o } from "./build-BJDfnAyi.mjs";
+import { D as e, Q as t, _ as n, l as r, nt as i, q as a, st as o } from "./build-DeJcDjPi.mjs";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useState as l } from "react";
 import { Trans as u, useLingui as d } from "@lingui/react";
 //#region src/client/components/ClipboardText.tsx
-var f = ({ text: i, tooltipContent: o, className: u, truncateAt: f, showTooltip: p = !0, ...m }) => {
-	let { i18n: h, _: g } = d(), [_, v] = l(!1), [y, b] = l(!1), x = `copyableTooltip  inline-flex items-center ${u || ""}`, S = async (e) => {
-		e.preventDefault(), e.stopPropagation();
+var f = ({ text: e, tooltipContent: a, className: u, truncateAt: f, showTooltip: p = !0, ...m }) => {
+	let { i18n: h, _: g } = d(), [_, v] = l(!1), [y, b] = l(!1), x = `copyableTooltip  inline-flex items-center ${u || ""}`, S = async (t) => {
+		t.preventDefault(), t.stopPropagation();
 		try {
-			await navigator.clipboard.writeText(i), v(!0), b(!1), setTimeout(() => v(!1), 2e3);
+			await navigator.clipboard.writeText(e), v(!0), b(!1), setTimeout(() => v(!1), 2e3);
 		} catch (e) {
 			console.error("Failed to copy text:", e);
 		}
-	}, C = f && i.length > f ? `${i.slice(0, f)}...` : i, w = () => _ ? o || h._({ id: "u+VWhB" }) : h._({ id: "he3ygx" }), T = _ && p || y && p;
-	return /* @__PURE__ */ s("div", {
+	}, C = f && e.length > f ? `${e.slice(0, f)}...` : e, w = () => _ ? a || h._({ id: "u+VWhB" }) : h._({ id: "he3ygx" }), T = _ && p || y && p;
+	return /*#__PURE__*/ s("div", {
 		...m,
 		className: x,
-		children: /* @__PURE__ */ c(n, {
+		children: /*#__PURE__*/ c(o, {
 			open: T,
-			children: [/* @__PURE__ */ s(t, {
+			children: [/*#__PURE__*/ s(n, {
 				onClick: S,
 				onMouseEnter: () => !_ && b(!0),
 				onMouseLeave: () => b(!1),
 				"aria-label": h._({
 					id: "Wbg1jv",
-					values: { text: i }
+					values: { text: e }
 				}),
 				className: "cursor-pointer",
 				asChild: !0,
 				"data-testid": "clipboard-copy-trigger",
-				children: /* @__PURE__ */ s("div", {
+				children: /*#__PURE__*/ s("div", {
 					className: "group",
-					children: /* @__PURE__ */ c(a, {
+					children: /*#__PURE__*/ c(t, {
 						direction: "horizontal",
 						gap: "1",
 						className: "items-center hover:underline",
-						children: [/* @__PURE__ */ s("span", {
+						children: [/*#__PURE__*/ s("span", {
 							className: "select-none",
 							children: C
-						}), /* @__PURE__ */ s(r, {
+						}), /*#__PURE__*/ s(r, {
 							icon: _ ? "check" : "contentCopy",
 							size: "18"
 						})]
 					})
 				})
-			}), /* @__PURE__ */ s(e, { children: w() })]
+			}), /*#__PURE__*/ s(i, { children: w() })]
 		})
 	});
 };
 //#endregion
 //#region src/client/components/ContentHeader/ContentHeader.tsx
-function p({ title: e, projectId: t, actions: n }) {
-	return /* @__PURE__ */ c("header", { children: [
-		/* @__PURE__ */ c("div", {
+function p({ title: t, projectId: n, actions: r }) {
+	return /*#__PURE__*/ c("header", { children: [
+		/*#__PURE__*/ c("div", {
 			className: "flex flex-col sm:flex-row sm:items-center sm:justify-between",
-			children: [/* @__PURE__ */ s(i, { children: e }), /* @__PURE__ */ c("div", {
+			children: [/*#__PURE__*/ s(a, { children: t }), /*#__PURE__*/ c("div", {
 				className: "text-theme-light flex items-center gap-1 text-sm",
-				children: [/* @__PURE__ */ c("span", {
+				children: [/*#__PURE__*/ c("span", {
 					className: "font-semibold",
 					children: [
-						/* @__PURE__ */ s(u, { id: "mSfwLL" }),
+						/*#__PURE__*/ s(u, { id: "mSfwLL" }),
 						":",
 						" "
 					]
-				}), /* @__PURE__ */ s(f, {
-					text: t,
+				}), /*#__PURE__*/ s(f, {
+					text: n,
 					truncateAt: 15
 				})]
 			})]
 		}),
-		/* @__PURE__ */ s(o, { className: "mt-4" }),
-		n && /* @__PURE__ */ s("div", {
-			className: "mt-2 flex justify-end",
-			children: n
+		/*#__PURE__*/ s(e, { className: "mt-4" }),
+		r && /*#__PURE__*/ s("div", {
+			className: "mt-3 flex justify-end",
+			children: r
 		})
 	] });
 }
 //#endregion
-export { p as t };
+export { f as n, p as t };
 
-//# sourceMappingURL=ContentHeader-BXZoN3B9.mjs.map
+//# sourceMappingURL=ContentHeader-kx1Th5Sq.mjs.map

package/dist/client/{ContentHeader-BXZoN3B9.mjs.map → ContentHeader-kx1Th5Sq.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"ContentHeader-BXZoN3B9.mjs","names":["React","useState","Tooltip","TooltipTrigger","TooltipContent","Icon","Stack","ClipboardText","text","tooltipContent","className","truncateAt","showTooltip","props","useLingui","copied","setCopied","isHovering","setIsHovering","combinedClassName","handleCopy","e","preventDefault","stopPropagation","navigator","clipboard","writeText","setTimeout","err","console","error","displayText","length","slice","getTooltipContent","t","tooltipIsOpen","div","open","onClick","onMouseEnter","onMouseLeave","aria-label","asChild","data-testid","direction","gap","span","icon","size","Divider","ContentHeading","ClipboardText","ContentHeader","title","projectId","actions","header","div","className","span","text","truncateAt"],"sources":["../../src/client/components/ClipboardText.tsx","../../src/client/components/ContentHeader/ContentHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Tooltip, TooltipTrigger, TooltipContent, Icon, Stack } from \"@cloudoperators/juno-ui-components\"\nimport { useLingui } from \"@lingui/react/macro\"\n\nexport interface ClipboardTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  tooltipContent?: string\n  text: string\n  className?: string\n  truncateAt?: number\n  showTooltip?: boolean\n}\n\nconst ClipboardText: React.FC<ClipboardTextProps> = ({\n  text,\n  tooltipContent,\n  className,\n  truncateAt,\n  showTooltip = true,\n  ...props\n}) => {\n  const { t } = useLingui()\n  const [copied, setCopied] = useState(false)\n  const [isHovering, setIsHovering] = useState(false)\n\n  const combinedClassName = `copyableTooltip  inline-flex items-center ${className || \"\"}`\n\n  const handleCopy = async (e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(true)\n      setIsHovering(false)\n      setTimeout(() => setCopied(false), 2000)\n    } catch (err) {\n      console.error(\"Failed to copy text:\", err)\n    }\n  }\n\n  const displayText = truncateAt && text.length > truncateAt ? `${text.slice(0, truncateAt)}...` : text\n\n  // Determine tooltip content based on state\n  const getTooltipContent = () => {\n    if (copied) {\n      return tooltipContent || t`Copied to clipboard!`\n    }\n    return t`Copy`\n  }\n\n  const tooltipIsOpen = (copied && showTooltip) || (isHovering && showTooltip)\n\n  return (\n    <div {...props} className={combinedClassName}>\n      <Tooltip open={tooltipIsOpen}>\n        <TooltipTrigger\n          onClick={handleCopy}\n          onMouseEnter={() => !copied && setIsHovering(true)}\n          onMouseLeave={() => setIsHovering(false)}\n          aria-label={t`Copy ${text} to clipboard`}\n          className=\"cursor-pointer\"\n          asChild\n          data-testid=\"clipboard-copy-trigger\"\n        >\n          <div className=\"group\">\n            <Stack direction=\"horizontal\" gap=\"1\" className=\"items-center hover:underline\">\n              <span className=\"select-none\">{displayText}</span>\n              <Icon icon={copied ? \"check\" : \"contentCopy\"} size=\"18\" />\n            </Stack>\n          </div>\n        </TooltipTrigger>\n        <TooltipContent>{getTooltipContent()}</TooltipContent>\n      </Tooltip>\n    </div>\n  )\n}\n\nexport default ClipboardText\n","import type { ReactNode } from \"react\"\nimport { Divider, ContentHeading } from \"@cloudoperators/juno-ui-components\"\nimport { Trans } from \"@lingui/react/macro\"\nimport ClipboardText from \"../ClipboardText\"\n\ninterface ContentHeaderProps {\n  title: string\n  projectId: string\n  actions?: ReactNode\n}\n\nexport function ContentHeader({ title, projectId, actions }: ContentHeaderProps) {\n  return (\n    <header>\n      <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between\">\n        <ContentHeading>{title}</ContentHeading>\n        <div className=\"text-theme-light flex items-center gap-1 text-sm\">\n          <span className=\"font-semibold\">\n            <Trans>Project ID</Trans>:{\" \"}\n          </span>\n          <ClipboardText text={projectId} truncateAt={15} />\n        </div>\n      </div>\n      <Divider className=\"mt-4\" />\n      {actions && <div className=\"mt-2 flex justify-end\">{actions}</div>}\n    </header>\n  )\n}\n"],"mappings":";;;;;AAYA,IAAMO,KAA+C,EACnDC,SACAC,mBACAC,cACAC,eACAC,iBAAc,IACd,GAAGC,QACJ;CACC,IAAM,EAAA,MAAA,GAAA,GAAA,MAAQC,GAAAA,EACR,CAACC,GAAQC,KAAaf,EAAS,GAAA,EAC/B,CAACgB,GAAYC,KAAiBjB,EAAS,GAAA,EAEvCkB,IAAoB,6CAA6CT,KAAa,MAE9EU,IAAa,OAAOC,MAAAA;AAExBA,EADAA,EAAEC,gBAAc,EAChBD,EAAEE,iBAAe;AAEjB,MAAI;AAIFI,GAHA,MAAMH,UAAUC,UAAUC,UAAUlB,EAAAA,EACpCQ,EAAU,GAAA,EACVE,EAAc,GAAA,EACdS,iBAAiBX,EAAU,GAAA,EAAQ,IAAA;WAC5BY,GAAK;AACZC,WAAQC,MAAM,wBAAwBF,EAAAA;;IAIpCG,IAAcpB,KAAcH,EAAKwB,SAASrB,IAAa,GAAGH,EAAKyB,MAAM,GAAGtB,EAAAA,CAAY,OAAOH,GAG3F0B,UACAnB,IACKN,KAAkB0B,EAAAA,EAAC,EAAA,IAAA,UAAqB,CAAA,GAE1CA,EAAAA,EAAC,EAAA,IAAA,UAAK,CAAA,EAGTC,IAAgB,KAAWxB,KAAiBK,KAAcL;AAEhE,QACE,kBAACyB,OAAAA;EAAK,GAAGxB;EAAOH,WAAWS;YACzB,kBAACjB,GAAAA;GAAQoC,MAAMF;cACb,kBAACjC,GAAAA;IACCoC,SAASnB;IACToB,oBAAoB,CAACzB,KAAUG,EAAc,GAAA;IAC7CuB,oBAAoBvB,EAAc,GAAA;IAClCwB,cAAYP,EAAAA,EAAC;;eAAQ3B,SAAAA;KAAkB,CAAA;IACvCE,WAAU;IACViC,SAAO;IACPC,eAAY;cAEZ,kBAACP,OAAAA;KAAI3B,WAAU;eACb,kBAACJ,GAAAA;MAAMuC,WAAU;MAAaC,KAAI;MAAIpC,WAAU;iBAC9C,kBAACqC,QAAAA;OAAKrC,WAAU;iBAAeqB;UAC/B,kBAAC1B,GAAAA;OAAK2C,MAAMjC,IAAS,UAAU;OAAekC,MAAK;;;;OAIzD,kBAAC7C,GAAAA,EAAAA,UAAgB8B,GAAAA,EAAAA,CAAAA,CAAAA;;;;;;AC5DzB,SAAgBmB,EAAc,EAAEC,UAAOC,cAAWC,cAA6B;AAC7E,QACE,kBAACC,UAAAA,EAAAA,UAAAA;EACC,kBAACC,OAAAA;GAAIC,WAAU;cACb,kBAACR,GAAAA,EAAAA,UAAgBG,GAAAA,CAAAA,EACjB,kBAACI,OAAAA;IAAIC,WAAU;eACb,kBAACC,QAAAA;KAAKD,WAAU;;MACd,kBAAA,GAAA,EAAA,IAAA,UAAA,CAAA;MAAyB;MAAE;;QAE7B,kBAACP,GAAAA;KAAcS,MAAMN;KAAWO,YAAY;;;;EAGhD,kBAACZ,GAAAA,EAAQS,WAAU,QAAA,CAAA;EAClBH,KAAW,kBAACE,OAAAA;GAAIC,WAAU;aAAyBH"}
+{"version":3,"file":"ContentHeader-kx1Th5Sq.mjs","names":["React","useState","Tooltip","TooltipTrigger","TooltipContent","Icon","Stack","ClipboardText","text","tooltipContent","className","truncateAt","showTooltip","props","useLingui","copied","setCopied","isHovering","setIsHovering","combinedClassName","handleCopy","e","preventDefault","stopPropagation","navigator","clipboard","writeText","setTimeout","err","console","error","displayText","length","slice","getTooltipContent","t","tooltipIsOpen","div","open","onClick","onMouseEnter","onMouseLeave","aria-label","asChild","data-testid","direction","gap","span","icon","size","Divider","ContentHeading","ClipboardText","ContentHeader","title","projectId","actions","header","div","className","span","text","truncateAt"],"sources":["../../src/client/components/ClipboardText.tsx","../../src/client/components/ContentHeader/ContentHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { Tooltip, TooltipTrigger, TooltipContent, Icon, Stack } from \"@cloudoperators/juno-ui-components\"\nimport { useLingui } from \"@lingui/react/macro\"\n\nexport interface ClipboardTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  tooltipContent?: string\n  text: string\n  className?: string\n  truncateAt?: number\n  showTooltip?: boolean\n}\n\nconst ClipboardText: React.FC<ClipboardTextProps> = ({\n  text,\n  tooltipContent,\n  className,\n  truncateAt,\n  showTooltip = true,\n  ...props\n}) => {\n  const { t } = useLingui()\n  const [copied, setCopied] = useState(false)\n  const [isHovering, setIsHovering] = useState(false)\n\n  const combinedClassName = `copyableTooltip  inline-flex items-center ${className || \"\"}`\n\n  const handleCopy = async (e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(true)\n      setIsHovering(false)\n      setTimeout(() => setCopied(false), 2000)\n    } catch (err) {\n      console.error(\"Failed to copy text:\", err)\n    }\n  }\n\n  const displayText = truncateAt && text.length > truncateAt ? `${text.slice(0, truncateAt)}...` : text\n\n  // Determine tooltip content based on state\n  const getTooltipContent = () => {\n    if (copied) {\n      return tooltipContent || t`Copied to clipboard!`\n    }\n    return t`Copy`\n  }\n\n  const tooltipIsOpen = (copied && showTooltip) || (isHovering && showTooltip)\n\n  return (\n    <div {...props} className={combinedClassName}>\n      <Tooltip open={tooltipIsOpen}>\n        <TooltipTrigger\n          onClick={handleCopy}\n          onMouseEnter={() => !copied && setIsHovering(true)}\n          onMouseLeave={() => setIsHovering(false)}\n          aria-label={t`Copy ${text} to clipboard`}\n          className=\"cursor-pointer\"\n          asChild\n          data-testid=\"clipboard-copy-trigger\"\n        >\n          <div className=\"group\">\n            <Stack direction=\"horizontal\" gap=\"1\" className=\"items-center hover:underline\">\n              <span className=\"select-none\">{displayText}</span>\n              <Icon icon={copied ? \"check\" : \"contentCopy\"} size=\"18\" />\n            </Stack>\n          </div>\n        </TooltipTrigger>\n        <TooltipContent>{getTooltipContent()}</TooltipContent>\n      </Tooltip>\n    </div>\n  )\n}\n\nexport default ClipboardText\n","import type { ReactNode } from \"react\"\nimport { Divider, ContentHeading } from \"@cloudoperators/juno-ui-components\"\nimport { Trans } from \"@lingui/react/macro\"\nimport ClipboardText from \"../ClipboardText\"\n\ninterface ContentHeaderProps {\n  title: string\n  projectId: string\n  actions?: ReactNode\n}\n\nexport function ContentHeader({ title, projectId, actions }: ContentHeaderProps) {\n  return (\n    <header>\n      <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between\">\n        <ContentHeading>{title}</ContentHeading>\n        <div className=\"text-theme-light flex items-center gap-1 text-sm\">\n          <span className=\"font-semibold\">\n            <Trans>Project ID</Trans>:{\" \"}\n          </span>\n          <ClipboardText text={projectId} truncateAt={15} />\n        </div>\n      </div>\n      <Divider className=\"mt-4\" />\n      {actions && <div className=\"mt-3 flex justify-end\">{actions}</div>}\n    </header>\n  )\n}\n"],"mappings":";;;;;AAYA,IAAMO,KAA+C,EACnDC,SACAC,mBACAC,cACAC,eACAC,iBAAc,IACd,GAAGC,QACJ;CACC,IAAM,EAAA,MAAA,GAAA,GAAA,MAAQC,EAAAA,GACR,CAACC,GAAQC,KAAaf,EAAS,EAAA,GAC/B,CAACgB,GAAYC,KAAiBjB,EAAS,EAAA,GAEvCkB,IAAoB,6CAA6CT,KAAa,MAE9EU,IAAa,OAAOC,MAAAA;EAExBA,AADAA,EAAEC,eAAc,GAChBD,EAAEE,gBAAe;EAEjB,IAAI;GAIFI,AAHA,MAAMH,UAAUC,UAAUC,UAAUlB,CAAAA,GACpCQ,EAAU,EAAA,GACVE,EAAc,EAAA,GACdS,iBAAiBX,EAAU,EAAA,GAAQ,GAAA;EACrC,SAASY,GAAK;GACZC,QAAQC,MAAM,wBAAwBF,CAAAA;EACxC;CACF,GAEMG,IAAcpB,KAAcH,EAAKwB,SAASrB,IAAa,GAAGH,EAAKyB,MAAM,GAAGtB,CAAAA,EAAY,OAAOH,GAG3F0B,UACAnB,IACKN,KAAkB0B,EAAAA,EAAC,EAAA,IAAA,SAAqB,CAAA,IAE1CA,EAAAA,EAAC,EAAA,IAAA,SAAK,CAAA,GAGTC,IAAgB,KAAWxB,KAAiBK,KAAcL;CAEhE,OACE,gBAACyB,OAAAA;EAAK,GAAGxB;EAAOH,WAAWS;YACzB,gBAACjB,GAAAA;GAAQoC,MAAMF;cACb,gBAACjC,GAAAA;IACCoC,SAASnB;IACToB,oBAAoB,CAACzB,KAAUG,EAAc,EAAA;IAC7CuB,oBAAoBvB,EAAc,EAAA;IAClCwB,cAAYP,EAAAA,EAAC;;eAAQ3B,QAAAA;IAAkB,CAAA;IACvCE,WAAU;IACViC,SAAO;IACPC,eAAY;cAEZ,gBAACP,OAAAA;KAAI3B,WAAU;eACb,gBAACJ,GAAAA;MAAMuC,WAAU;MAAaC,KAAI;MAAIpC,WAAU;iBAC9C,gBAACqC,QAAAA;OAAKrC,WAAU;iBAAeqB;UAC/B,gBAAC1B,GAAAA;OAAK2C,MAAMjC,IAAS,UAAU;OAAekC,MAAK;;;;OAIzD,gBAAC7C,GAAAA,EAAAA,UAAgB8B,EAAAA,EAAAA,CAAAA,CAAAA;;;AAIzB;;;AChEA,SAAgBmB,EAAc,EAAEC,UAAOC,cAAWC,cAA6B;CAC7E,OACE,gBAACC,UAAAA,EAAAA,UAAAA;EACC,gBAACC,OAAAA;GAAIC,WAAU;cACb,gBAACR,GAAAA,EAAAA,UAAgBG,EAAAA,CAAAA,GACjB,gBAACI,OAAAA;IAAIC,WAAU;eACb,gBAACC,QAAAA;KAAKD,WAAU;;MACd,gBAAA,GAAA,EAAA,IAAA,SAAA,CAAA;MAAyB;MAAE;;QAE7B,gBAACP,GAAAA;KAAcS,MAAMN;KAAWO,YAAY;;;;EAGhD,gBAACZ,GAAAA,EAAQS,WAAU,OAAA,CAAA;EAClBH,KAAW,gBAACE,OAAAA;GAAIC,WAAU;aAAyBH;;;AAG1D"}