@ansiversa/components 0.0.117 → 0.0.119

package/index.ts

@@ -1,5 +1,6 @@
 export { default as WebLayout } from "./src/layouts/WebLayout.astro";
 export { default as AuthLayout } from "./src/layouts/AuthLayout.astro";
+export { default as AvMiniAppBar } from "./src/layouts/AvMiniAppBar.astro";
 export { default as AvBrand } from './src/AvBrand.astro';
 export { default as AvButton } from './src/AvButton.astro';
 export { default as AvCard } from './src/AvCard.astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.117",
+  "version": "0.0.119",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {
@@ -16,9 +16,14 @@
   "keywords": [
     "astro-component"
   ],
-  "scripts": {},
+  "scripts": {
+    "typecheck": "astro check",
+    "build": "astro check"
+  },
   "devDependencies": {
-    "astro": "^5.16.3"
+    "@astrojs/check": "^0.9.6",
+    "astro": "^5.16.3",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/AvAccordion.astro

@@ -104,7 +104,6 @@ const scriptContent = `
       data-id={item.id}
       data-disabled={item.disabled ? "true" : undefined}
       aria-disabled={item.disabled ? "true" : undefined}
-      disabled={item.disabled ? true : undefined}
     >
       <summary
         class="av-accordion__summary"

package/src/layouts/AvMiniAppBar.astro

@@ -0,0 +1,73 @@
+---
+import type { MiniAppLink } from "./miniAppRegistry";
+import { MINI_APP_REGISTRY } from "./miniAppRegistry";
+
+interface Props {
+  appKey: string;
+  links?: MiniAppLink[];
+}
+
+const { appKey, links } = Astro.props as Props;
+
+const meta = MINI_APP_REGISTRY[appKey];
+const appName = meta?.name ?? appKey;
+
+let menuLinks = links ?? meta?.links ?? [];
+if (!menuLinks.length) {
+  menuLinks = [{ label: "Home", href: "/" }];
+}
+---
+
+<div class="av-mini-app-bar">
+  <div class="av-mini-app-bar__inner">
+    <div class="av-mini-app-bar__title" title={appName}>
+      <span class="av-mini-app-bar__name">{appName}</span>
+    </div>
+
+    <div class="av-mini-app-bar__menu" x-data="{ open: false }">
+      <button
+        type="button"
+        class="av-mini-app-bar__menu-button"
+        aria-label="Open app menu"
+        aria-haspopup="menu"
+        x-on:click="open = !open"
+        x-bind:aria-expanded="open"
+      >
+        <svg
+          class="av-mini-app-bar__menu-icon"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="5" r="1.5" />
+          <circle cx="12" cy="12" r="1.5" />
+          <circle cx="12" cy="19" r="1.5" />
+        </svg>
+      </button>
+
+      <div
+        x-show="open"
+        x-cloak
+        x-transition.origin.top.right
+        x-on:click.outside="open = false"
+        class="av-user-menu av-mini-app-menu"
+        role="menu"
+        aria-label={`${appName} menu`}
+      >
+        <div class="av-nav-user-menu">
+          {menuLinks.map((item) => (
+            <a href={item.href} class="av-dropdown-item" role="menuitem">
+              <span>{item.label}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/layouts/WebLayout.astro

@@ -1,6 +1,7 @@
 ---
 import AvBrand from "../AvBrand.astro";
 import AvFooter from "../AvFooter.astro";
+import AvMiniAppBar from "./AvMiniAppBar.astro";
 import AvNavbar from "../AvNavbar.astro";
 import AvNavbarActions from "../AvNavbarActions.astro";
 
@@ -8,15 +9,24 @@ interface Props {
   title?: string;
   description?: string;
   notificationUnreadCount?: number;
+  miniAppKey?: string;
+  links?: { label: string; href: string }[];
 }
 
 const {
   title = "Ansiversa",
   description = "Ansiversa – A unified ecosystem of premium Apps designed to feel simple, powerful, and delightful.",
   notificationUnreadCount = 0,
+  miniAppKey,
+  links,
 } = Astro.props;
 
-const user = Astro.locals.user;
+const user = (Astro.locals as { user?: {
+  id: string;
+  email: string;
+  name?: string;
+  roleId?: number;
+} }).user;
 
 const rawDomain = (
   import.meta.env.PUBLIC_SITE_URL ||
@@ -77,6 +87,8 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
       <AvNavbarActions user={user} notificationUnreadCount={notificationUnreadCount} />
     </AvNavbar>
 
+    {miniAppKey && <AvMiniAppBar appKey={miniAppKey} links={links} />}
+
     <!-- Main content -->
     <main class="av-main">
       <slot />

package/src/layouts/miniAppRegistry.ts

@@ -0,0 +1,25 @@
+export type MiniAppLink = { label: string; href: string };
+export type MiniAppMeta = { name: string; links: MiniAppLink[] };
+
+export const MINI_APP_REGISTRY: Record<string, MiniAppMeta> = {
+  "quiz": {
+    name: "Quiz",
+    links: [{ label: "Home", href: "/" }],
+  },
+  "resume-builder": {
+    name: "Resume Builder",
+    links: [{ label: "Home", href: "/" }],
+  },
+  "portfolio-creator": {
+    name: "Portfolio Creator",
+    links: [{ label: "Home", href: "/" }],
+  },
+  "app-starter": {
+    name: "App Starter",
+    links: [{ label: "Home", href: "/" }],
+  },
+  "flashnote": {
+    name: "FlashNote",
+    links: [{ label: "Home", href: "/" }],
+  },
+};

package/src/styles/global.css

@@ -1404,6 +1404,39 @@
     @apply text-slate-50;
   }
 
+  /* Mini-app context bar ------------------------------- */
+
+  .av-mini-app-bar {
+    @apply border-b border-slate-800/60 bg-slate-950/70 backdrop-blur-xl;
+    position: relative;
+    z-index: 40;
+  }
+
+  .av-mini-app-bar__inner {
+    @apply w-full max-w-none px-4 py-2 flex items-center justify-between gap-3;
+  }
+
+  .av-mini-app-bar__title {
+    @apply text-sm font-medium text-slate-100;
+    min-width: 0;
+  }
+
+  .av-mini-app-bar__name {
+    @apply block truncate;
+  }
+
+  .av-mini-app-bar__menu {
+    @apply relative;
+  }
+
+  .av-mini-app-bar__menu-button {
+    @apply inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-800/70 bg-slate-950/60 text-slate-200 transition hover:border-slate-600 hover:text-slate-50;
+  }
+
+  .av-mini-app-menu {
+    @apply w-56 mt-2;
+  }
+
   /* Badges / Pills --------------------------------------- */
 
   .av-badge {