@ansiversa/components 0.0.126 → 0.0.128

package/index.ts

@@ -37,6 +37,8 @@ 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 AvAiAssist } from "./src/components/Ai/AvAiAssist.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 +60,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.128",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/components/Ai/AvAiAssist.astro

@@ -0,0 +1,294 @@
+---
+interface Props {
+  featureKey: string;
+  value: string;
+  minChars?: number;
+  maxChars?: number;
+  label?: string;
+  onAppendEvent?: string;
+  onReplaceEvent?: string;
+  [key: string]: any;
+}
+
+const {
+  featureKey,
+  value,
+  minChars = 30,
+  maxChars = 1500,
+  label = "AI",
+  onAppendEvent = "av:ai-append",
+  onReplaceEvent = "av:ai-replace",
+  ...rest
+} = Astro.props as Props;
+
+const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
+---
+
+<div
+  class="av-ai-assist"
+  data-av-ai-assist={componentId}
+  data-value={value}
+  {...rest}
+  x-data={`avAiAssist(${JSON.stringify({
+    featureKey,
+    minChars,
+    maxChars,
+    label,
+    onAppendEvent,
+    onReplaceEvent,
+  })})`}
+  x-init="init()"
+>
+  <span class="av-ai-assist-trigger" :title="disabledReason || `Get ${label} suggestions`">
+    <button
+      type="button"
+      class="av-btn-ghost av-btn-sm av-ai-assist-btn"
+      @click.prevent="openModal()"
+      :disabled="!canFetch"
+      aria-label="Get AI suggestions"
+    >
+      <span aria-hidden="true">✨</span>
+      <span x-text="label"></span>
+    </button>
+  </span>
+
+  <template x-if="open">
+    <div class="av-ai-assist-overlay" @click.self="closeModal()" @keydown.escape.window="closeModal()">
+      <div class="av-ai-assist-modal" role="dialog" aria-modal="true" aria-label="AI suggestions">
+        <div class="av-auth-stack-sm">
+          <div class="av-row-between">
+            <h3 class="av-card-heading av-m-0">AI Suggestions</h3>
+            <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="closeModal()">Close</button>
+          </div>
+
+          <template x-if="loading">
+            <p class="av-text-soft av-m-0">Generating suggestions...</p>
+          </template>
+
+          <template x-if="error && !loading">
+            <div class="av-alert av-alert-danger" role="status" x-text="error"></div>
+          </template>
+
+          <template x-if="!loading && suggestions.length">
+            <div class="av-auth-stack-xs">
+              <template x-for="(suggestion, index) in suggestions" :key="`assist-${index}`">
+                <div class="av-ai-assist-suggestion">
+                  <p class="av-m-0" x-text="suggestion"></p>
+                  <div class="av-row-wrap">
+                    <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="appendSuggestion(suggestion)">Append</button>
+                    <button type="button" class="av-btn-primary av-btn-sm" @click.prevent="replaceSuggestion(suggestion)">Replace</button>
+                    <button type="button" class="av-btn-ghost av-btn-sm" @click.prevent="copySuggestion(suggestion, index)">
+                      <span x-text="copiedIndex === index ? 'Copied' : 'Copy'"></span>
+                    </button>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <p class="av-form-hint av-m-0">AI suggestions are optional. Please review before saving.</p>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>
+
+<script is:inline>
+  if (typeof window !== "undefined" && !window.avAiAssist) {
+    window.avAiAssist = (config) => ({
+      featureKey: config.featureKey,
+      minChars: Number(config.minChars ?? 30),
+      maxChars: Number(config.maxChars ?? 1500),
+      label: typeof config.label === "string" && config.label ? config.label : "AI",
+      onAppendEvent: typeof config.onAppendEvent === "string" && config.onAppendEvent ? config.onAppendEvent : "av:ai-append",
+      onReplaceEvent: typeof config.onReplaceEvent === "string" && config.onReplaceEvent ? config.onReplaceEvent : "av:ai-replace",
+      value: "",
+      open: false,
+      loading: false,
+      error: null,
+      suggestions: [],
+      copiedIndex: null,
+      observer: null,
+
+      init() {
+        this.syncValue();
+
+        if (typeof MutationObserver !== "undefined") {
+          this.observer = new MutationObserver(() => this.syncValue());
+          this.observer.observe(this.$el, { attributes: true, attributeFilter: ["data-value"] });
+        }
+      },
+
+      get textValue() {
+        const raw = typeof this.value === "string" ? this.value : "";
+        return raw.trim();
+      },
+
+      get canFetch() {
+        return !this.loading && !this.disabledReason;
+      },
+
+      get disabledReason() {
+        if (this.loading) return "Generating suggestions...";
+        if (this.textValue.length > this.maxChars) return `Text exceeds ${this.maxChars} characters.`;
+        if (this.textValue.length < this.minChars) return `Add at least ${this.minChars} characters to get meaningful suggestions.`;
+        return "";
+      },
+
+      syncValue() {
+        const nextValue = this.$el.getAttribute("data-value") ?? "";
+        this.value = String(nextValue);
+      },
+
+      closeModal() {
+        this.open = false;
+        this.loading = false;
+        this.error = null;
+        this.suggestions = [];
+        this.copiedIndex = null;
+      },
+
+      mapError(status, payload) {
+        if (status === 401) return "Please sign in again.";
+        if (status === 429) return "Too many requests. Try again in a few minutes.";
+        if (status === 400) {
+          if (payload && typeof payload.error === "string" && payload.error.trim()) {
+            return payload.error.trim();
+          }
+          return "Invalid request.";
+        }
+        return "Something went wrong. Please try again.";
+      },
+
+      async openModal() {
+        this.syncValue();
+        if (!this.canFetch) return;
+
+        this.open = true;
+        this.loading = true;
+        this.error = null;
+        this.suggestions = [];
+        this.copiedIndex = null;
+
+        try {
+          const response = await fetch("/api/ai/suggest", {
+            method: "POST",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              featureKey: this.featureKey,
+              userText: this.textValue,
+            }),
+          });
+
+          const text = await response.text();
+          let payload = null;
+
+          if (text) {
+            try {
+              payload = JSON.parse(text);
+            } catch {
+              payload = null;
+            }
+          }
+
+          if (!response.ok) {
+            this.error = this.mapError(response.status, payload);
+            return;
+          }
+
+          const list = Array.isArray(payload?.suggestions)
+            ? payload.suggestions
+                .filter((item) => typeof item === "string")
+                .map((item) => item.trim())
+                .filter(Boolean)
+            : [];
+
+          this.suggestions = list.slice(0, 5);
+          if (!this.suggestions.length) {
+            this.error = "No suggestions returned.";
+          }
+        } catch {
+          this.error = "Something went wrong. Please try again.";
+        } finally {
+          this.loading = false;
+        }
+      },
+
+      appendSuggestion(text) {
+        const value = String(text ?? "").trim();
+        if (!value) return;
+        window.dispatchEvent(new CustomEvent(this.onAppendEvent, { detail: { text: value } }));
+        this.closeModal();
+      },
+
+      replaceSuggestion(text) {
+        const value = String(text ?? "").trim();
+        if (!value) return;
+        window.dispatchEvent(new CustomEvent(this.onReplaceEvent, { detail: { text: value } }));
+        this.closeModal();
+      },
+
+      async copySuggestion(text, index) {
+        const value = String(text ?? "").trim();
+        if (!value) return;
+
+        try {
+          if (!navigator?.clipboard?.writeText) {
+            throw new Error("Clipboard unavailable");
+          }
+
+          await navigator.clipboard.writeText(value);
+          this.copiedIndex = index;
+          window.setTimeout(() => {
+            if (this.copiedIndex === index) this.copiedIndex = null;
+          }, 1200);
+        } catch {
+          this.error = "Copy failed. Please copy manually.";
+        }
+      },
+    });
+  }
+</script>
+
+<style>
+  .av-ai-assist-trigger {
+    display: inline-flex;
+  }
+
+  .av-ai-assist-btn[disabled] {
+    cursor: not-allowed;
+  }
+
+  .av-ai-assist-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 60;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+    background: rgba(2, 6, 23, 0.72);
+  }
+
+  .av-ai-assist-modal {
+    width: min(720px, 100%);
+    max-height: min(80vh, 720px);
+    overflow: auto;
+    border-radius: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: var(--av-surface, #070f23);
+    padding: 1rem;
+  }
+
+  .av-ai-assist-suggestion {
+    display: grid;
+    gap: 0.75rem;
+    border-radius: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--av-surface-soft, rgba(255, 255, 255, 0.04));
+    padding: 0.75rem;
+  }
+</style>

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 = {