@ansiversa/components 0.0.126 → 0.0.127

package/index.ts

@@ -37,6 +37,7 @@ 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 AvImageUploader } from "./src/components/media/AvImageUploader.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';
@@ -58,6 +59,7 @@ export type {
   PortfolioPublicTemplateKey,
   PortfolioPublicSectionKey,
 } from "./src/templates/portfolio-public";
+export type { AvMediaUploadResponse, AvMediaUploadResult } from "./src/media/types";
 
 export * from "./src/alpine";
 export * from "./src/Summary/types";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.126",
+  "version": "0.0.127",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/components/media/AvImageUploader.astro

@@ -0,0 +1,341 @@
+---
+interface Props {
+  uploadUrl: string;
+  scope: "account" | "portfolio-profile";
+  purpose?: "avatar";
+  portfolioId?: string;
+  label?: string;
+  helpText?: string;
+  initialUrl?: string | null;
+  maxBytes?: number;
+  onUploadedEventName?: string;
+}
+
+const {
+  uploadUrl,
+  scope,
+  purpose = "avatar",
+  portfolioId = "",
+  label = "Profile photo",
+  helpText = "JPG, PNG, or WebP up to 2 MB.",
+  initialUrl = null,
+  maxBytes = 2 * 1024 * 1024,
+  onUploadedEventName = "av:uploaded",
+} = Astro.props as Props;
+
+if (!uploadUrl) {
+  throw new Error("AvImageUploader requires an `uploadUrl` prop.");
+}
+
+const uploaderId = `av-image-uploader-${Math.random().toString(36).slice(2, 10)}`;
+---
+
+<div class="av-image-uploader" id={uploaderId}>
+  <p class="av-image-uploader__label">{label}</p>
+  {helpText ? <p class="av-image-uploader__help">{helpText}</p> : null}
+
+  <div class="av-image-uploader__row">
+    <div class="av-image-uploader__preview-wrap">
+      <img
+        class={`av-image-uploader__preview ${initialUrl ? "is-visible" : ""}`}
+        src={initialUrl ?? ""}
+        alt="Uploaded image preview"
+        data-av-preview
+      />
+      <div
+        class={`av-image-uploader__placeholder ${initialUrl ? "is-hidden" : ""}`}
+        data-av-placeholder
+      >
+        No photo
+      </div>
+    </div>
+
+    <div class="av-image-uploader__controls">
+      <label class="av-image-uploader__button" data-av-trigger for={`${uploaderId}-input`}>
+        Choose image
+      </label>
+      <input
+        id={`${uploaderId}-input`}
+        class="av-image-uploader__input"
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        data-av-input
+      />
+      <p class="av-image-uploader__status" data-av-status></p>
+      <p class="av-image-uploader__error" data-av-error role="status"></p>
+    </div>
+  </div>
+</div>
+
+<script
+  define:vars={{
+    uploaderId,
+    uploadUrl,
+    scope,
+    purpose,
+    portfolioId,
+    maxBytes,
+    onUploadedEventName,
+  }}
+>
+  (() => {
+    const root = document.getElementById(uploaderId);
+    if (!root) return;
+
+    const input = root.querySelector("[data-av-input]");
+    const trigger = root.querySelector("[data-av-trigger]");
+    const preview = root.querySelector("[data-av-preview]");
+    const placeholder = root.querySelector("[data-av-placeholder]");
+    const status = root.querySelector("[data-av-status]");
+    const error = root.querySelector("[data-av-error]");
+
+    const allowedTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
+
+    const formatBytes = (bytes) => {
+      if (!Number.isFinite(bytes) || bytes <= 0) return "0 B";
+      if (bytes < 1024) return `${bytes} B`;
+      const kb = bytes / 1024;
+      if (kb < 1024) return `${kb.toFixed(1)} KB`;
+      return `${(kb / 1024).toFixed(1)} MB`;
+    };
+
+    const setUploading = (isUploading) => {
+      if (trigger) {
+        trigger.textContent = isUploading ? "Uploading..." : "Choose image";
+        trigger.classList.toggle("is-disabled", isUploading);
+      }
+      if (input) {
+        input.disabled = isUploading;
+      }
+    };
+
+    const setError = (message) => {
+      if (error) {
+        error.textContent = message ?? "";
+      }
+      if (status && message) {
+        status.textContent = "";
+      }
+    };
+
+    const setStatus = (message) => {
+      if (status) {
+        status.textContent = message ?? "";
+      }
+    };
+
+    const setPreview = (url) => {
+      if (!preview || !placeholder) return;
+
+      if (url) {
+        preview.src = url;
+        preview.classList.add("is-visible");
+        placeholder.classList.add("is-hidden");
+      } else {
+        preview.src = "";
+        preview.classList.remove("is-visible");
+        placeholder.classList.remove("is-hidden");
+      }
+    };
+
+    const parseError = async (res) => {
+      try {
+        const body = await res.json();
+        return body?.error || body?.message || "Upload failed.";
+      } catch {
+        return "Upload failed.";
+      }
+    };
+
+    input?.addEventListener("change", async (event) => {
+      const target = event.currentTarget;
+      const file = target?.files?.[0];
+      if (!file) return;
+
+      setError("");
+      setStatus("");
+
+      if (!allowedTypes.has(file.type)) {
+        setError("Please upload a JPG, PNG, or WebP image.");
+        target.value = "";
+        return;
+      }
+
+      if (file.size > maxBytes) {
+        setError(`Image must be ${formatBytes(maxBytes)} or smaller.`);
+        target.value = "";
+        return;
+      }
+
+      setUploading(true);
+
+      try {
+        const form = new FormData();
+        form.set("purpose", purpose);
+        form.set("scope", scope);
+        if (scope === "portfolio-profile" && portfolioId) {
+          form.set("portfolioId", portfolioId);
+        }
+        form.set("file", file);
+
+        const res = await fetch(uploadUrl, {
+          method: "POST",
+          body: form,
+          credentials: "include",
+        });
+
+        if (!res.ok) {
+          throw new Error(await parseError(res));
+        }
+
+        const payload = await res.json();
+        if (!payload?.ok || !payload?.media?.url) {
+          throw new Error("Upload response is invalid.");
+        }
+
+        const media = payload.media;
+        setPreview(media.url);
+        setStatus(`Uploaded ${formatBytes(media.size)} (${media.width}x${media.height})`);
+        setError("");
+
+        root.dispatchEvent(
+          new CustomEvent(onUploadedEventName, {
+            bubbles: true,
+            detail: media,
+          }),
+        );
+      } catch (uploadError) {
+        setError(uploadError?.message || "Upload failed.");
+      } finally {
+        setUploading(false);
+        target.value = "";
+      }
+    });
+  })();
+</script>
+
+<style>
+  .av-image-uploader {
+    display: grid;
+    gap: 0.6rem;
+  }
+
+  .av-image-uploader__label {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: #e2e8f0;
+  }
+
+  .av-image-uploader__help {
+    margin: 0;
+    font-size: 0.8rem;
+    color: #94a3b8;
+  }
+
+  .av-image-uploader__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .av-image-uploader__preview-wrap {
+    width: 86px;
+    height: 86px;
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  .av-image-uploader__preview,
+  .av-image-uploader__placeholder {
+    width: 86px;
+    height: 86px;
+    border-radius: 999px;
+  }
+
+  .av-image-uploader__preview {
+    display: none;
+    object-fit: cover;
+    border: 1px solid rgba(148, 163, 184, 0.35);
+    background: rgba(15, 23, 42, 0.6);
+  }
+
+  .av-image-uploader__preview.is-visible {
+    display: block;
+  }
+
+  .av-image-uploader__placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed rgba(148, 163, 184, 0.45);
+    background: rgba(15, 23, 42, 0.45);
+    color: #94a3b8;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .av-image-uploader__placeholder.is-hidden {
+    display: none;
+  }
+
+  .av-image-uploader__controls {
+    display: grid;
+    gap: 0.35rem;
+    min-width: 220px;
+  }
+
+  .av-image-uploader__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    min-width: 130px;
+    padding: 0.52rem 0.9rem;
+    border-radius: 0.65rem;
+    border: 1px solid rgba(100, 116, 139, 0.4);
+    background: rgba(15, 23, 42, 0.75);
+    color: #e2e8f0;
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: border-color 120ms ease, background 120ms ease;
+  }
+
+  .av-image-uploader__button:hover {
+    border-color: rgba(148, 163, 184, 0.65);
+    background: rgba(30, 41, 59, 0.85);
+  }
+
+  .av-image-uploader__button.is-disabled {
+    opacity: 0.7;
+    cursor: progress;
+    pointer-events: none;
+  }
+
+  .av-image-uploader__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .av-image-uploader__status {
+    margin: 0;
+    color: #93c5fd;
+    font-size: 0.78rem;
+  }
+
+  .av-image-uploader__error {
+    margin: 0;
+    min-height: 1em;
+    color: #fca5a5;
+    font-size: 0.78rem;
+  }
+</style>

package/src/media/types.ts

@@ -0,0 +1,13 @@
+export type AvMediaUploadResult = {
+  key: string;
+  url: string;
+  size: number;
+  contentType: string;
+  width: number;
+  height: number;
+};
+
+export type AvMediaUploadResponse = {
+  ok: true;
+  media: AvMediaUploadResult;
+};

package/src/templates/portfolio-public/Classic.astro

@@ -22,6 +22,13 @@ const hasContact =
   <main class="mx-auto grid w-full max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[280px_1fr] lg:px-8">
     <aside class="space-y-8 border-b border-slate-200 pb-8 lg:border-b-0 lg:border-r lg:pb-0 lg:pr-8">
       <header class="space-y-2">
+        {data.owner.profilePhotoUrl ? (
+          <img
+            src={data.owner.profilePhotoUrl}
+            alt={`${ownerName} profile photo`}
+            class="h-16 w-16 rounded-full border border-slate-200 object-cover"
+          />
+        ) : null}
         <h1 class="text-3xl font-bold tracking-tight text-slate-950">{ownerName}</h1>
         {data.owner.headline ? <p class="text-base text-slate-700">{data.owner.headline}</p> : null}
         {data.owner.location ? <p class="text-sm text-slate-500">{data.owner.location}</p> : null}

package/src/templates/portfolio-public/Gallery.astro

@@ -14,6 +14,13 @@ const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
   <main class="mx-auto w-full max-w-6xl px-4 py-10 lg:px-8">
     <header class="mb-8 rounded-2xl border border-slate-200 bg-slate-50 p-6 sm:p-8">
       <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Portfolio</p>
+      {data.owner.profilePhotoUrl ? (
+        <img
+          src={data.owner.profilePhotoUrl}
+          alt={`${ownerName} profile photo`}
+          class="mt-4 h-16 w-16 rounded-full border border-slate-200 object-cover"
+        />
+      ) : null}
       <h1 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 sm:text-4xl">{ownerName}</h1>
       {data.owner.headline ? <p class="mt-2 text-lg text-slate-700">{data.owner.headline}</p> : null}
       {hasText(data.owner.summary) ? <p class="mt-4 max-w-3xl leading-7 text-slate-700">{data.owner.summary}</p> : null}

package/src/templates/portfolio-public/Minimal.astro

@@ -13,6 +13,13 @@ const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
 <article class="min-h-screen bg-white text-slate-900">
   <main class="mx-auto w-full max-w-3xl px-6 py-12 sm:px-8">
     <header class="border-b border-slate-200 pb-8">
+      {data.owner.profilePhotoUrl ? (
+        <img
+          src={data.owner.profilePhotoUrl}
+          alt={`${ownerName} profile photo`}
+          class="mb-4 h-16 w-16 rounded-full border border-slate-200 object-cover"
+        />
+      ) : null}
       <h1 class="text-4xl font-light tracking-tight text-slate-950 sm:text-5xl">{ownerName}</h1>
       {data.owner.headline ? <p class="mt-2 text-lg text-slate-700">{data.owner.headline}</p> : null}
       {data.owner.location ? <p class="mt-1 text-sm uppercase tracking-[0.16em] text-slate-500">{data.owner.location}</p> : null}

package/src/templates/portfolio-public/Story.astro

@@ -14,6 +14,13 @@ const ownerName = data.owner.fullName || data.meta?.title || "Portfolio";
   <main class="mx-auto w-full max-w-5xl px-5 py-12 lg:px-10">
     <header class="mx-auto max-w-3xl space-y-4 text-center">
       <p class="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">Story Portfolio</p>
+      {data.owner.profilePhotoUrl ? (
+        <img
+          src={data.owner.profilePhotoUrl}
+          alt={`${ownerName} profile photo`}
+          class="mx-auto h-20 w-20 rounded-full border border-slate-200 object-cover"
+        />
+      ) : null}
       <h1 class="text-4xl font-bold tracking-tight text-slate-950 sm:text-5xl">{ownerName}</h1>
       {data.owner.headline ? <p class="text-lg text-slate-700">{data.owner.headline}</p> : null}
       {hasText(data.owner.summary) ? <p class="leading-7 text-slate-700">{data.owner.summary}</p> : null}

package/src/templates/portfolio-public/types.ts

@@ -20,6 +20,7 @@ export type PortfolioPublicOwner = {
   headline: string;
   summary: string;
   location: string;
+  profilePhotoUrl: string;
 };
 
 export type PortfolioPublicContact = {