@ansiversa/components 0.0.106 → 0.0.118

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.106",
+  "version": "0.0.118",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/resume-templates/resumeData.ts

@@ -127,6 +127,12 @@ export const resumeData: ResumeData = {
     { name: "Tamil", proficiency: "Native" },
   ],
 
+  declaration: {
+    text: "I hereby declare that the information furnished above is true to the best of my knowledge.",
+    place: "Pondicherry – India.",
+    name: "Karthikeyan Subbarayan Ramalingam",
+  },
+
   settings: {
     showSkillsAs: "chips",
     paper: "A4",

package/resume-templates/typescript-schema.ts

@@ -91,6 +91,12 @@ export type ResumeData = {
     summary?: string;
   }>;
 
+  declaration?: {
+    text?: string;
+    place?: string;
+    name?: string;
+  };
+
   // Template feature flags (optional)
   settings?: {
     showSkillsAs?: "chips" | "levels"; // chips for classic/modern, levels for minimal

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,12 +9,14 @@ interface Props {
   title?: string;
   description?: string;
   notificationUnreadCount?: number;
+  miniAppKey?: string;
 }
 
 const {
   title = "Ansiversa",
   description = "Ansiversa – A unified ecosystem of premium Apps designed to feel simple, powerful, and delightful.",
   notificationUnreadCount = 0,
+  miniAppKey,
 } = Astro.props;
 
 const user = Astro.locals.user;
@@ -77,6 +80,8 @@ const ROOT_URL = rawDomain.match(/^https?:\/\//i)
       <AvNavbarActions user={user} notificationUnreadCount={notificationUnreadCount} />
     </AvNavbar>
 
+    {miniAppKey && <AvMiniAppBar appKey={miniAppKey} />}
+
     <!-- 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/resume-templates/ResumeTemplateClassic.astro

@@ -29,15 +29,22 @@ if (basics.contact.website) {
   contactItems.push({ label: formatUrlLabel(basics.contact.website), href: basics.contact.website });
 }
 for (const link of basics.links ?? []) {
-  contactItems.push({ label: link.label ?? formatUrlLabel(link.url), href: link.url });
+  const urlLabel = link.url ? formatUrlLabel(link.url) : link.label;
+  if (urlLabel) {
+    contactItems.push({ label: urlLabel, href: link.url });
+  }
 }
 
 const experienceItems = data.experience ?? [];
 const projectItems = data.projects ?? [];
 const educationItems = data.education ?? [];
 const skills = data.skills ?? [];
+const certifications = data.certifications ?? [];
 const highlights = data.highlights ?? [];
 const languages = data.languages ?? [];
+const awards = data.awards ?? [];
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -46,6 +53,19 @@ const languages = data.languages ?? [];
       text-decoration: none;
       color: inherit;
     }
+
+    .resume-template .classic-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+      gap: 2.5rem;
+    }
+
+    .resume-template .classic-divider {
+      background: none !important;
+      border-top: 1px solid #e2e8f0 !important;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
   }
 </style>
 
@@ -57,13 +77,13 @@ const languages = data.languages ?? [];
           <h1 class="text-3xl font-bold tracking-tight">{basics.fullName}</h1>
           <p class="mt-1 text-base font-medium text-slate-700">{basics.headline}</p>
           {basics.summary && (
-            <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600">{basics.summary}</p>
+            <p class="mt-3 text-sm leading-6 text-slate-600">{basics.summary}</p>
           )}
         </div>
 
         {contactItems.length > 0 && (
           <div class="text-sm text-slate-700 sm:text-right">
-            <div class="flex flex-col gap-1">
+            <div class="flex flex-col gap-1 sm:items-end">
               {contactItems.map((item) =>
                 item.href ? (
                   <a
@@ -81,9 +101,9 @@ const languages = data.languages ?? [];
         )}
       </header>
 
-      <div class="my-8 h-px bg-slate-200"></div>
+      <div class="classic-divider my-8 h-0 border-t border-slate-200"></div>
 
-      <div class="grid gap-10 lg:grid-cols-3">
+      <div class="classic-grid grid gap-10 lg:grid-cols-3">
         <div class="space-y-10 lg:col-span-2">
           {experienceItems.length > 0 && (
             <section>
@@ -203,6 +223,29 @@ const languages = data.languages ?? [];
             </section>
           )}
 
+          {certifications.length > 0 && (
+            <section>
+              <h2 class="text-sm font-bold tracking-widest text-slate-900">CERTIFICATIONS</h2>
+              <ul class="mt-4 space-y-3 text-sm text-slate-700">
+                {certifications.map((cert) => {
+                  const meta = [cert.issuer, cert.year].filter(Boolean).join(" · ");
+                  return (
+                    <li class="space-y-1">
+                      {cert.link ? (
+                        <a class="font-semibold text-slate-900 underline underline-offset-2" href={cert.link}>
+                          {cert.name}
+                        </a>
+                      ) : (
+                        <div class="font-semibold text-slate-900">{cert.name}</div>
+                      )}
+                      {meta && <div class="text-xs text-slate-600">{meta}</div>}
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          )}
+
           {highlights.length > 0 && (
             <section>
               <h2 class="text-sm font-bold tracking-widest text-slate-900">HIGHLIGHTS</h2>
@@ -227,8 +270,51 @@ const languages = data.languages ?? [];
               </ul>
             </section>
           )}
+
+          {awards.length > 0 && (
+            <section>
+              <h2 class="text-sm font-bold tracking-widest text-slate-900">ACHIEVEMENTS</h2>
+              <ul class="mt-4 space-y-3 text-sm text-slate-700">
+                {awards.map((award) => {
+                  const meta = [award.by, award.year].filter(Boolean).join(" · ");
+                  return (
+                    <li class="space-y-1">
+                      <div class="font-semibold text-slate-900">{award.title}</div>
+                      {meta && <div class="text-xs text-slate-600">{meta}</div>}
+                      {award.summary && <div class="text-sm text-slate-700">{award.summary}</div>}
+                    </li>
+                  );
+                })}
+              </ul>
+            </section>
+          )}
         </aside>
       </div>
+
+      {hasDeclaration && (
+        <>
+          <div class="classic-divider my-8 h-0 border-t border-slate-200"></div>
+          <section class="space-y-4">
+            <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
+            {declaration.text && (
+              <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
+            )}
+            {(declaration.place || declaration.name) && (
+              <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                {declaration.place && (
+                  <div>
+                    <span class="font-semibold text-slate-900">Place:</span>{" "}
+                    {declaration.place}
+                  </div>
+                )}
+                {declaration.name && (
+                  <div class="font-semibold text-slate-900">{declaration.name}</div>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
     </section>
   </main>
 </div>

package/src/resume-templates/ResumeTemplateExecutiveTimeline.astro

@@ -30,6 +30,8 @@ const projects = data.projects ?? [];
 const skills = data.skills ?? [];
 const education = data.education ?? [];
 const highlights = data.highlights ?? [];
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -183,6 +185,31 @@ const highlights = data.highlights ?? [];
           )}
         </aside>
       </div>
+
+      {hasDeclaration && (
+        <>
+          <div class="my-8 h-px bg-slate-200"></div>
+          <section class="space-y-4">
+            <h2 class="text-sm font-bold tracking-widest text-slate-900">DECLARATION</h2>
+            {declaration.text && (
+              <p class="text-sm leading-6 text-slate-700">{declaration.text}</p>
+            )}
+            {(declaration.place || declaration.name) && (
+              <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                {declaration.place && (
+                  <div>
+                    <span class="font-semibold text-slate-900">Place:</span>{" "}
+                    {declaration.place}
+                  </div>
+                )}
+                {declaration.name && (
+                  <div class="font-semibold text-slate-900">{declaration.name}</div>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
     </section>
   </main>
 </div>

package/src/resume-templates/ResumeTemplateMinimal.astro

@@ -38,6 +38,8 @@ const skills = data.skills ?? [];
 const education = data.education ?? [];
 const certifications = data.certifications ?? [];
 const showSkillsAs = data.settings?.showSkillsAs ?? "levels";
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -214,6 +216,31 @@ const showSkillsAs = data.settings?.showSkillsAs ?? "levels";
           )}
         </aside>
       </div>
+
+      {hasDeclaration && (
+        <>
+          <div class="my-10 h-px bg-slate-200"></div>
+          <section class="space-y-4">
+            <h2 class="text-xs font-semibold tracking-[0.25em] text-slate-500">DECLARATION</h2>
+            {declaration.text && (
+              <p class="text-sm leading-7 text-slate-700">{declaration.text}</p>
+            )}
+            {(declaration.place || declaration.name) && (
+              <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                {declaration.place && (
+                  <div>
+                    <span class="font-semibold text-slate-900">Place:</span>{" "}
+                    {declaration.place}
+                  </div>
+                )}
+                {declaration.name && (
+                  <div class="font-semibold text-slate-900">{declaration.name}</div>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
     </section>
   </main>
 </div>

package/src/resume-templates/ResumeTemplateModernTwoTone.astro

@@ -40,6 +40,8 @@ const experienceItems = data.experience ?? [];
 const projects = data.projects ?? [];
 const education = data.education ?? [];
 const highlights = data.highlights ?? [];
+const declaration = data.declaration ?? {};
+const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
 <style>
@@ -238,6 +240,29 @@ const highlights = data.highlights ?? [];
               )}
             </div>
           </section>
+
+          {hasDeclaration && (
+            <section>
+              <div class="my-8 h-px bg-slate-200"></div>
+              <h2 class="text-xs font-bold tracking-widest text-slate-500">DECLARATION</h2>
+              {declaration.text && (
+                <p class="mt-3 text-sm leading-6 text-slate-700">{declaration.text}</p>
+              )}
+              {(declaration.place || declaration.name) && (
+                <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-sm text-slate-700">
+                  {declaration.place && (
+                    <div>
+                      <span class="font-semibold text-slate-900">Place:</span>{" "}
+                      {declaration.place}
+                    </div>
+                  )}
+                  {declaration.name && (
+                    <div class="font-semibold text-slate-900">{declaration.name}</div>
+                  )}
+                </div>
+              )}
+            </section>
+          )}
         </div>
       </div>
     </section>

package/src/styles/global.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@source "../**/*.{astro,js,jsx,ts,tsx}";
 
 /* =========================================
    Ansiversa Design Tokens
@@ -1403,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 {