@ansiversa/components 0.0.119 → 0.0.121

package/index.ts

@@ -34,14 +34,17 @@ export { default as AvTable } from './src/AvTable.astro';
 export { default as AvTableToolbar } from './src/AvTableToolbar.astro';
 export { default as AvTablePagination } from './src/AvTablePagination.astro';
 export { default as QuizSummary } from './src/Summary/QuizSummary.astro';
+export { default as FlashNoteSummary } from './src/Summary/FlashNoteSummary.astro';
+export { default as ResumeBuilderSummary } from './src/Summary/ResumeBuilderSummary.astro';
+export { default as PortfolioCreatorSummary } from './src/Summary/PortfolioCreatorSummary.astro';
 export { default as ResumeBuilderShell } from './src/resume-templates/ResumeBuilderShell.astro';
 export { default as ResumeTemplateClassic } from './src/resume-templates/ResumeTemplateClassic.astro';
 export { default as ResumeTemplateModernTwoTone } from './src/resume-templates/ResumeTemplateModernTwoTone.astro';
 export { default as ResumeTemplateMinimal } from './src/resume-templates/ResumeTemplateMinimal.astro';
 export { default as ResumeTemplateExecutiveTimeline } from './src/resume-templates/ResumeTemplateExecutiveTimeline.astro';
-export type { ResumeData, ResumeTemplateType } from './resume-templates/typescript-schema';
-export { formatDateRange } from './resume-templates/typescript-schema';
-export { resumeData } from './resume-templates/resumeData';
+export type { ResumeData, ResumeTemplateType } from './src/resume-templates/typescript-schema';
+export { formatDateRange } from './src/resume-templates/typescript-schema';
+export { resumeData } from './src/resume-templates/resumeData';
 
 export * from "./src/alpine";
 export * from "./src/Summary/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {
@@ -10,7 +10,6 @@
   },
   "files": [
     "src",
-    "resume-templates",
     "index.ts"
   ],
   "keywords": [

package/src/Summary/FlashNoteSummary.astro

@@ -0,0 +1,69 @@
+---
+import { AvButton, AvCard } from "@ansiversa/components";
+import type { FlashnoteDashboardSummaryV1 } from "./types";
+import { buildAppUrl } from "../utils/appUrls";
+
+interface Props {
+  summary: FlashnoteDashboardSummaryV1;
+}
+
+const { summary } = Astro.props as Props;
+
+const formatDateTime = (value: string | null, fallback = "Not yet") => {
+  if (!value) return fallback;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? fallback : parsed.toLocaleString();
+};
+
+const flashnoteBaseUrl = buildAppUrl(summary.appId);
+const decksUrl = buildAppUrl(summary.appId, "/decks");
+---
+
+<section class="av-auth-stack-lg">
+  <div class="av-form-row">
+    <div class="av-auth-stack-xxs">
+      <div class="av-kicker">
+        <span>FlashNote</span>
+      </div>
+      <h2 class="av-card-heading">FlashNote summary</h2>
+      <p class="av-text-soft">Last study: {formatDateTime(summary.lastStudyAt)}</p>
+    </div>
+    <div class="av-row-wrap">
+      <AvButton href={flashnoteBaseUrl} size="sm">Open FlashNote</AvButton>
+      <AvButton href={decksUrl} size="sm" variant="ghost">View decks</AvButton>
+    </div>
+  </div>
+
+  <div class="av-grid-auto av-grid-auto--260">
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Decks</p>
+        <h3 class="av-app-card-title">{summary.decksCount}</h3>
+        <p class="av-text-soft">Total decks</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Cards</p>
+        <h3 class="av-app-card-title">{summary.cardsCount}</h3>
+        <p class="av-text-soft">Across all decks</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Reviews today</p>
+        <h3 class="av-app-card-title">{summary.reviewsToday}</h3>
+        <p class="av-text-soft">Scheduled reviews</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Last import</p>
+        <h3 class="av-app-card-title">
+          {formatDateTime(summary.lastImportedFromQuizAt, "No quiz imports")}
+        </h3>
+        <p class="av-text-soft">Quiz cards</p>
+      </div>
+    </AvCard>
+  </div>
+</section>

package/src/Summary/PortfolioCreatorSummary.astro

@@ -0,0 +1,71 @@
+---
+import { AvButton, AvCard } from "@ansiversa/components";
+import type { PortfolioDashboardSummaryV1 } from "./types";
+import { buildAppUrl } from "../utils/appUrls";
+
+interface Props {
+  summary: PortfolioDashboardSummaryV1;
+}
+
+const { summary } = Astro.props as Props;
+
+const formatDateTime = (value: string | null, fallback = "Not yet") => {
+  if (!value) return fallback;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? fallback : parsed.toLocaleString();
+};
+
+const portfolioBaseUrl = buildAppUrl(summary.appId);
+const portfoliosUrl = buildAppUrl(summary.appId, "/app/portfolios");
+const completionLabel =
+  typeof summary.completionHint === "number" ? `${summary.completionHint}%` : "—";
+---
+
+<section class="av-auth-stack-lg">
+  <div class="av-form-row">
+    <div class="av-auth-stack-xxs">
+      <div class="av-kicker">
+        <span>Portfolio Creator</span>
+      </div>
+      <h2 class="av-card-heading">Portfolio summary</h2>
+      <p class="av-text-soft">Last updated: {formatDateTime(summary.lastUpdatedAt)}</p>
+    </div>
+    <div class="av-row-wrap">
+      <AvButton href={portfolioBaseUrl} size="sm">Open Portfolio Creator</AvButton>
+      <AvButton href={portfoliosUrl} size="sm" variant="ghost">View portfolios</AvButton>
+    </div>
+  </div>
+
+  <div class="av-grid-auto av-grid-auto--260">
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Portfolios</p>
+        <h3 class="av-app-card-title">{summary.totalPortfolios}</h3>
+        <p class="av-text-soft">Total portfolios</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Published</p>
+        <h3 class="av-app-card-title">{summary.publishedCount}</h3>
+        <p class="av-text-soft">Live portfolios</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Completion</p>
+        <h3 class="av-app-card-title">{completionLabel}</h3>
+        <p class="av-text-soft">Publish ratio</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Visibility</p>
+        <h3 class="av-app-card-title">
+          {summary.visibilityBreakdown.public} / {summary.visibilityBreakdown.unlisted} / {summary.visibilityBreakdown.private}
+        </h3>
+        <p class="av-text-soft">Public / Unlisted / Private</p>
+      </div>
+    </AvCard>
+  </div>
+</section>

package/src/Summary/ResumeBuilderSummary.astro

@@ -0,0 +1,70 @@
+---
+import { AvButton, AvCard } from "@ansiversa/components";
+import type { ResumeBuilderDashboardSummaryV1 } from "./types";
+import { buildAppUrl } from "../utils/appUrls";
+
+interface Props {
+  summary: ResumeBuilderDashboardSummaryV1;
+}
+
+const { summary } = Astro.props as Props;
+
+const formatDateTime = (value: string | null, fallback = "Not yet") => {
+  if (!value) return fallback;
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? fallback : parsed.toLocaleString();
+};
+
+const resumeBaseUrl = buildAppUrl(summary.appId);
+const resumesUrl = buildAppUrl(summary.appId, "/app/resumes");
+const templatesLabel = summary.templatesUsed.length > 0 ? summary.templatesUsed.join(", ") : "No templates yet";
+const completionLabel =
+  typeof summary.completionHint === "number" ? `${summary.completionHint}%` : "—";
+---
+
+<section class="av-auth-stack-lg">
+  <div class="av-form-row">
+    <div class="av-auth-stack-xxs">
+      <div class="av-kicker">
+        <span>Resume Builder</span>
+      </div>
+      <h2 class="av-card-heading">Resume builder summary</h2>
+      <p class="av-text-soft">Last updated: {formatDateTime(summary.lastUpdatedAt)}</p>
+    </div>
+    <div class="av-row-wrap">
+      <AvButton href={resumeBaseUrl} size="sm">Open Resume Builder</AvButton>
+      <AvButton href={resumesUrl} size="sm" variant="ghost">View resumes</AvButton>
+    </div>
+  </div>
+
+  <div class="av-grid-auto av-grid-auto--260">
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Resumes</p>
+        <h3 class="av-app-card-title">{summary.totalResumes}</h3>
+        <p class="av-text-soft">Total resumes</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Completion</p>
+        <h3 class="av-app-card-title">{completionLabel}</h3>
+        <p class="av-text-soft">Enabled sections</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Default resume</p>
+        <h3 class="av-app-card-title">{summary.defaultResumeTitle ?? "Not set"}</h3>
+        <p class="av-text-soft">Primary resume</p>
+      </div>
+    </AvCard>
+    <AvCard variant="soft" className="av-card--fullheight">
+      <div class="av-auth-stack-xxs">
+        <p class="av-card-heading">Templates used</p>
+        <h3 class="av-app-card-title">{summary.templatesUsed.length}</h3>
+        <p class="av-text-soft">{templatesLabel}</p>
+      </div>
+    </AvCard>
+  </div>
+</section>

package/src/Summary/types.ts

@@ -28,3 +28,39 @@ export type QuizDashboardSummaryV1 = {
     avgScorePct: number;
   }>;
 };
+
+export type FlashnoteDashboardSummaryV1 = {
+  appId: "flashnote";
+  version: 1;
+  updatedAt: string;
+  decksCount: number;
+  cardsCount: number;
+  reviewsToday: number;
+  lastStudyAt: string | null;
+  lastImportedFromQuizAt: string | null;
+};
+
+export type ResumeBuilderDashboardSummaryV1 = {
+  appId: "resume-builder";
+  version: 1;
+  totalResumes: number;
+  defaultResumeTitle: string | null;
+  lastUpdatedAt: string;
+  templatesUsed: string[];
+  sectionsEnabledCount?: number;
+  completionHint?: number;
+};
+
+export type PortfolioDashboardSummaryV1 = {
+  appId: "portfolio-creator";
+  version: 1;
+  totalPortfolios: number;
+  publishedCount: number;
+  lastUpdatedAt: string;
+  visibilityBreakdown: {
+    public: number;
+    unlisted: number;
+    private: number;
+  };
+  completionHint?: number;
+};

package/src/resume-templates/ResumeBuilderShell.astro

@@ -1,5 +1,5 @@
 ---
-import type { ResumeData, ResumeTemplateType } from "../../resume-templates/typescript-schema";
+import type { ResumeData, ResumeTemplateType } from "./typescript-schema";
 import ResumeTemplateClassic from "./ResumeTemplateClassic.astro";
 import ResumeTemplateExecutiveTimeline from "./ResumeTemplateExecutiveTimeline.astro";
 import ResumeTemplateMinimal from "./ResumeTemplateMinimal.astro";

package/src/resume-templates/ResumeTemplateClassic.astro

@@ -1,6 +1,6 @@
 ---
-import type { ResumeData } from "../../resume-templates/typescript-schema";
-import { formatDateRange } from "../../resume-templates/typescript-schema";
+import type { ResumeData } from "./typescript-schema";
+import { formatDateRange } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -47,32 +47,10 @@ const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
-<style>
-  @media print {
-    .resume-template a {
-      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>
-
 <div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
-      <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <header class="av-print-avoid-break flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <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>
@@ -87,7 +65,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
               {contactItems.map((item) =>
                 item.href ? (
                   <a
-                    class="text-slate-900 underline underline-offset-2 hover:text-slate-700"
+                    class="text-slate-900 underline underline-offset-2 hover:text-slate-700 print:no-underline"
                     href={item.href}
                   >
                     {item.label}
@@ -101,10 +79,10 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
         )}
       </header>
 
-      <div class="classic-divider my-8 h-0 border-t border-slate-200"></div>
+      <div class="my-8 h-0 border-t border-slate-200"></div>
 
-      <div class="classic-grid grid gap-10 lg:grid-cols-3">
-        <div class="space-y-10 lg:col-span-2">
+      <div class="grid gap-10 lg:grid-cols-3 print:grid-cols-1">
+        <div class="space-y-10 lg:col-span-2 print:col-span-1">
           {experienceItems.length > 0 && (
             <section>
               <h2 class="text-sm font-bold tracking-widest text-slate-900">EXPERIENCE</h2>
@@ -113,7 +91,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                   const range = formatDateRange(item);
                   const meta = item.location ? `${range} · ${item.location}` : range;
                   return (
-                    <article>
+                    <article class="av-print-avoid-break">
                       <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                         <div>
                           <h3 class="text-base font-semibold">{item.role}</h3>
@@ -147,7 +125,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                     ? formatDateRange({ start: project.start, end: project.end, present: project.present })
                     : undefined;
                   return (
-                    <article>
+                    <article class="av-print-avoid-break">
                       <div class="flex items-baseline justify-between gap-3">
                         {project.link ? (
                           <a class="text-base font-semibold underline underline-offset-4" href={project.link}>
@@ -191,7 +169,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                 {educationItems.map((edu) => {
                   const range = edu.start ? formatDateRange({ start: edu.start, end: edu.end }) : undefined;
                   return (
-                    <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
+                    <div class="av-print-avoid-break flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                       <div>
                         <h3 class="text-base font-semibold">{edu.degree}</h3>
                         <p class="text-sm text-slate-700">{edu.school}</p>
@@ -211,7 +189,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
 
         <aside class="space-y-10">
           {skills.length > 0 && (
-            <section>
+            <section class="av-print-avoid-break">
               <h2 class="text-sm font-bold tracking-widest text-slate-900">SKILLS</h2>
               <div class="mt-4 flex flex-wrap gap-2">
                 {skills.map((skill) => (
@@ -224,13 +202,13 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
           )}
 
           {certifications.length > 0 && (
-            <section>
+            <section class="av-print-avoid-break">
               <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">
+                    <li class="av-print-avoid-break space-y-1">
                       {cert.link ? (
                         <a class="font-semibold text-slate-900 underline underline-offset-2" href={cert.link}>
                           {cert.name}
@@ -247,7 +225,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
           )}
 
           {highlights.length > 0 && (
-            <section>
+            <section class="av-print-avoid-break">
               <h2 class="text-sm font-bold tracking-widest text-slate-900">HIGHLIGHTS</h2>
               <ul class="mt-4 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-700">
                 {highlights.map((item) => (
@@ -258,7 +236,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
           )}
 
           {languages.length > 0 && (
-            <section>
+            <section class="av-print-avoid-break">
               <h2 class="text-sm font-bold tracking-widest text-slate-900">LANGUAGES</h2>
               <ul class="mt-4 space-y-2 text-sm text-slate-700">
                 {languages.map((language) => (
@@ -278,7 +256,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
                 {awards.map((award) => {
                   const meta = [award.by, award.year].filter(Boolean).join(" · ");
                   return (
-                    <li class="space-y-1">
+                    <li class="av-print-avoid-break 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>}
@@ -293,8 +271,8 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
 
       {hasDeclaration && (
         <>
-          <div class="classic-divider my-8 h-0 border-t border-slate-200"></div>
-          <section class="space-y-4">
+          <div class="my-8 h-0 border-t border-slate-200"></div>
+          <section class="av-print-avoid-break 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>

package/src/resume-templates/ResumeTemplateExecutiveTimeline.astro

@@ -1,6 +1,6 @@
 ---
-import type { ResumeData } from "../../resume-templates/typescript-schema";
-import { formatDateRange } from "../../resume-templates/typescript-schema";
+import type { ResumeData } from "./typescript-schema";
+import { formatDateRange } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;
@@ -25,6 +25,13 @@ for (const link of basics.links ?? []) {
   contactChips.push(link.label ?? formatUrlLabel(link.url));
 }
 
+const normalizeSkillLabel = (value?: string) =>
+  (value ?? "")
+    .replace(/\s+/g, " ")
+    .replace(/[|•]+/g, " · ")
+    .replace(/(\d)([A-Za-z])/g, "$1 $2")
+    .trim();
+
 const experienceItems = data.experience ?? [];
 const projects = data.projects ?? [];
 const skills = data.skills ?? [];
@@ -34,22 +41,10 @@ const declaration = data.declaration ?? {};
 const hasDeclaration = Boolean(declaration.text || declaration.place || declaration.name);
 ---
 
-<style>
-  @media print {
-    .resume-template a {
-      text-decoration: none;
-      color: inherit;
-    }
-    .resume-template {
-      background: white;
-    }
-  }
-</style>
-
 <div class="resume-template bg-slate-100 text-slate-900 print:bg-white">
   <main class="mx-auto max-w-4xl p-4 sm:p-6">
     <section class="rounded-2xl bg-white p-7 shadow-sm ring-1 ring-slate-200 sm:p-10 print:shadow-none print:ring-0">
-      <header class="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
+      <header class="av-print-avoid-break flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
         <div>
           <h1 class="text-3xl font-bold tracking-tight">{basics.fullName}</h1>
           <p class="mt-1 text-sm font-medium text-slate-700">{basics.headline}</p>
@@ -63,7 +58,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
         </div>
 
         {basics.summary && (
-          <div class="rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700 sm:max-w-sm">
+          <div class="av-print-avoid-break rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700 sm:max-w-sm">
             <div class="text-xs font-semibold tracking-widest text-slate-500">SUMMARY</div>
             <p class="mt-2 leading-6">{basics.summary}</p>
           </div>
@@ -72,14 +67,14 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
 
       <div class="my-8 h-px bg-slate-200"></div>
 
-      <div class="grid gap-10 lg:grid-cols-3">
+      <div class="grid gap-10 lg:grid-cols-3 print:grid-cols-1">
         <div class="lg:col-span-2">
           {experienceItems.length > 0 && (
             <>
               <h2 class="text-sm font-bold tracking-widest text-slate-900">EXPERIENCE</h2>
               <div class="mt-6 space-y-8">
                 {experienceItems.map((item) => (
-                  <div class="relative pl-6">
+                  <div class="av-print-avoid-break relative pl-6">
                     <div class="absolute left-0 top-1.5 h-full w-px bg-slate-200"></div>
                     <div class="absolute left-[-5px] top-1.5 h-3 w-3 rounded-full bg-slate-900"></div>
 
@@ -112,7 +107,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
               <h2 class="text-sm font-bold tracking-widest text-slate-900">PROJECTS</h2>
               <div class="mt-5 space-y-4">
                 {projects.map((project) => (
-                  <div class="rounded-xl border border-slate-200 p-4">
+                  <div class="av-print-avoid-break rounded-xl border border-slate-200 p-4">
                     <div class="flex items-baseline justify-between">
                       {project.link ? (
                         <a class="font-semibold underline underline-offset-4" href={project.link}>
@@ -143,22 +138,22 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
 
         <aside class="space-y-8">
           {skills.length > 0 && (
-            <section class="rounded-xl border border-slate-200 p-4">
+            <section class="av-print-avoid-break rounded-xl border border-slate-200 p-4">
               <h2 class="text-xs font-bold tracking-widest text-slate-500">SKILLS</h2>
-              <div class="mt-3 flex flex-wrap gap-2">
+              <ul class="mt-3 list-disc space-y-1 pl-5 text-sm text-slate-700">
                 {skills.map((skill) => (
-                  <span class="rounded-full bg-slate-100 px-3 py-1 text-xs">{skill.name}</span>
+                  <li>{normalizeSkillLabel(skill.name)}</li>
                 ))}
-              </div>
+              </ul>
             </section>
           )}
 
           {education.length > 0 && (
-            <section class="rounded-xl border border-slate-200 p-4">
+            <section class="av-print-avoid-break rounded-xl border border-slate-200 p-4">
               <h2 class="text-xs font-bold tracking-widest text-slate-500">EDUCATION</h2>
               <div class="mt-3 space-y-4 text-sm text-slate-700">
                 {education.map((edu) => (
-                  <div>
+                  <div class="av-print-avoid-break rounded-lg border border-slate-100 p-3">
                     <div class="font-semibold">{edu.degree}</div>
                     <div class="text-slate-600">{edu.school}</div>
                     {edu.location && <div class="text-slate-500">{edu.location}</div>}
@@ -174,7 +169,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
           )}
 
           {highlights.length > 0 && (
-            <section class="rounded-xl border border-slate-200 p-4">
+            <section class="av-print-avoid-break rounded-xl border border-slate-200 p-4">
               <h2 class="text-xs font-bold tracking-widest text-slate-500">HIGHLIGHTS</h2>
               <ul class="mt-3 space-y-2 text-sm leading-6 text-slate-700">
                 {highlights.map((highlight) => (
@@ -189,7 +184,7 @@ const hasDeclaration = Boolean(declaration.text || declaration.place || declarat
       {hasDeclaration && (
         <>
           <div class="my-8 h-px bg-slate-200"></div>
-          <section class="space-y-4">
+          <section class="av-print-avoid-break 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>

package/src/resume-templates/ResumeTemplateMinimal.astro

@@ -1,6 +1,6 @@
 ---
-import type { ResumeData } from "../../resume-templates/typescript-schema";
-import { formatDateRange } from "../../resume-templates/typescript-schema";
+import type { ResumeData } from "./typescript-schema";
+import { formatDateRange } from "./typescript-schema";
 
 interface Props {
   data: ResumeData;