@ansiversa/components 0.0.129 → 0.0.131

package/index.ts

@@ -39,6 +39,8 @@ export { default as ResumeBuilderSummary } from './src/Summary/ResumeBuilderSumm
 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 { AppLogo } from "./src/Logo";
+export type { AppLogoProps } from "./src/Logo";
 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';

package/package.json

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

package/src/Logo/AppLogo.tsx

@@ -0,0 +1,39 @@
+import type { JSX } from "astro/jsx-runtime";
+import AppLogoDefault from "./logos/AppLogoDefault";
+import AppLogoFlashNote from "./logos/AppLogoFlashNote";
+import AppLogoPortfolioCreator from "./logos/AppLogoPortfolioCreator";
+import AppLogoQuiz from "./logos/AppLogoQuiz";
+import AppLogoResumeBuilder from "./logos/AppLogoResumeBuilder";
+
+type LogoComponentProps = {
+  size: number;
+  class?: string;
+  title?: string;
+};
+
+type LogoComponent = (props: LogoComponentProps) => JSX.Element;
+
+export type AppLogoProps = {
+  appId: string;
+  size?: "xs" | "sm" | "md";
+  class?: string;
+  title?: string;
+};
+
+const SIZE_MAP: Record<NonNullable<AppLogoProps["size"]>, number> = {
+  xs: 16,
+  sm: 18,
+  md: 20,
+};
+
+const LOGO_REGISTRY: Record<string, LogoComponent> = {
+  quiz: AppLogoQuiz,
+  "resume-builder": AppLogoResumeBuilder,
+  "portfolio-creator": AppLogoPortfolioCreator,
+  flashnote: AppLogoFlashNote,
+};
+
+export default function AppLogo({ appId, size = "sm", class: className, title }: AppLogoProps) {
+  const Logo = LOGO_REGISTRY[appId] ?? AppLogoDefault;
+  return <Logo size={SIZE_MAP[size]} class={className} title={title} />;
+}

package/src/Logo/index.ts

@@ -0,0 +1,7 @@
+export { default as AppLogo } from "./AppLogo";
+export { default as AppLogoDefault } from "./logos/AppLogoDefault";
+export { default as AppLogoFlashNote } from "./logos/AppLogoFlashNote";
+export { default as AppLogoPortfolioCreator } from "./logos/AppLogoPortfolioCreator";
+export { default as AppLogoQuiz } from "./logos/AppLogoQuiz";
+export { default as AppLogoResumeBuilder } from "./logos/AppLogoResumeBuilder";
+export type { AppLogoProps } from "./AppLogo";

package/src/Logo/logos/AppLogoDefault.tsx

@@ -0,0 +1,25 @@
+import type { AppLogoGlyphProps } from "./AppLogoQuiz";
+
+export default function AppLogoDefault({ size, class: className, title }: AppLogoGlyphProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={className}
+      aria-hidden={title ? undefined : "true"}
+      role={title ? "img" : "presentation"}
+    >
+      {title ? <title>{title}</title> : null}
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 8v8" />
+      <path d="M8 12h8" />
+    </svg>
+  );
+}

package/src/Logo/logos/AppLogoFlashNote.tsx

@@ -0,0 +1,23 @@
+import type { AppLogoGlyphProps } from "./AppLogoQuiz";
+
+export default function AppLogoFlashNote({ size, class: className, title }: AppLogoGlyphProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={className}
+      aria-hidden={title ? undefined : "true"}
+      role={title ? "img" : "presentation"}
+    >
+      {title ? <title>{title}</title> : null}
+      <path d="M12 2.8L4.5 12H10l-1 9.2L19.5 10H14l1-7.2Z" />
+    </svg>
+  );
+}

package/src/Logo/logos/AppLogoPortfolioCreator.tsx

@@ -0,0 +1,26 @@
+import type { AppLogoGlyphProps } from "./AppLogoQuiz";
+
+export default function AppLogoPortfolioCreator({ size, class: className, title }: AppLogoGlyphProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={className}
+      aria-hidden={title ? undefined : "true"}
+      role={title ? "img" : "presentation"}
+    >
+      {title ? <title>{title}</title> : null}
+      <rect x="3" y="5" width="18" height="14" rx="2.5" />
+      <path d="M8.5 5V4a1.5 1.5 0 0 1 1.5-1.5h4A1.5 1.5 0 0 1 15.5 4v1" />
+      <path d="M3 11h18" />
+      <path d="M11 14.5h2" />
+    </svg>
+  );
+}

package/src/Logo/logos/AppLogoQuiz.tsx

@@ -0,0 +1,30 @@
+export type AppLogoGlyphProps = {
+  size: number;
+  class?: string;
+  title?: string;
+};
+
+export default function AppLogoQuiz({ size, class: className, title }: AppLogoGlyphProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={className}
+      aria-hidden={title ? undefined : "true"}
+      role={title ? "img" : "presentation"}
+    >
+      {title ? <title>{title}</title> : null}
+      <circle cx="11" cy="11" r="7" />
+      <path d="M21 21l-4.2-4.2" />
+      <path d="M8.6 9.2a2.6 2.6 0 1 1 4.8 1.3c-.7.8-1.8 1.4-1.8 2.4" />
+      <path d="M11.5 16h0" />
+    </svg>
+  );
+}

package/src/Logo/logos/AppLogoResumeBuilder.tsx

@@ -0,0 +1,26 @@
+import type { AppLogoGlyphProps } from "./AppLogoQuiz";
+
+export default function AppLogoResumeBuilder({ size, class: className, title }: AppLogoGlyphProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={className}
+      aria-hidden={title ? undefined : "true"}
+      role={title ? "img" : "presentation"}
+    >
+      {title ? <title>{title}</title> : null}
+      <rect x="4" y="3.5" width="16" height="17" rx="2.5" />
+      <path d="M8 8.5h8" />
+      <path d="M8 12h8" />
+      <path d="M8 15.5h5" />
+    </svg>
+  );
+}

package/src/components/Ai/AvAiAssist.astro

@@ -59,9 +59,17 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
     <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">
+          <div class="av-ai-assist-modal-header">
             <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>
+            <button
+              type="button"
+              class="av-btn-ghost av-btn-sm av-ai-assist-close"
+              @click.prevent="closeModal()"
+              aria-label="Close AI suggestions"
+              title="Close"
+            >
+              <span aria-hidden="true">X</span>
+            </button>
           </div>
 
           <template x-if="loading">
@@ -304,6 +312,21 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
     padding: 1rem;
   }
 
+  .av-ai-assist-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    gap: 0.75rem;
+  }
+
+  .av-ai-assist-close {
+    margin-left: auto;
+    flex-shrink: 0;
+    min-width: 2.25rem;
+    justify-content: center;
+  }
+
   .av-ai-assist-suggestion {
     display: grid;
     gap: 0.75rem;