@ansiversa/components 0.0.128 → 0.0.130

package/package.json

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

package/src/components/Ai/AvAiAssist.astro

@@ -2,6 +2,7 @@
 interface Props {
   featureKey: string;
   value: string;
+  valueSourceSelector?: string;
   minChars?: number;
   maxChars?: number;
   label?: string;
@@ -13,6 +14,7 @@ interface Props {
 const {
   featureKey,
   value,
+  valueSourceSelector,
   minChars = 30,
   maxChars = 1500,
   label = "AI",
@@ -31,6 +33,7 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
   {...rest}
   x-data={`avAiAssist(${JSON.stringify({
     featureKey,
+    valueSourceSelector: valueSourceSelector ?? null,
     minChars,
     maxChars,
     label,
@@ -56,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">
@@ -97,6 +108,10 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
   if (typeof window !== "undefined" && !window.avAiAssist) {
     window.avAiAssist = (config) => ({
       featureKey: config.featureKey,
+      valueSourceSelector:
+        typeof config.valueSourceSelector === "string" && config.valueSourceSelector.trim()
+          ? config.valueSourceSelector.trim()
+          : null,
       minChars: Number(config.minChars ?? 30),
       maxChars: Number(config.maxChars ?? 1500),
       label: typeof config.label === "string" && config.label ? config.label : "AI",
@@ -109,8 +124,17 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
       suggestions: [],
       copiedIndex: null,
       observer: null,
+      sourceElement: null,
 
       init() {
+        if (this.valueSourceSelector) {
+          this.sourceElement = document.querySelector(this.valueSourceSelector);
+          if (this.sourceElement) {
+            this.sourceElement.addEventListener("input", () => this.syncValue());
+            this.sourceElement.addEventListener("change", () => this.syncValue());
+          }
+        }
+
         this.syncValue();
 
         if (typeof MutationObserver !== "undefined") {
@@ -136,6 +160,11 @@ const componentId = `av-ai-assist-${Math.random().toString(36).slice(2, 10)}`;
       },
 
       syncValue() {
+        if (this.sourceElement && typeof this.sourceElement.value === "string") {
+          this.value = this.sourceElement.value;
+          return;
+        }
+
         const nextValue = this.$el.getAttribute("data-value") ?? "";
         this.value = String(nextValue);
       },
@@ -283,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;