@ibgib/web-gib 0.0.45 → 0.0.47

package/src/ui/ui-helpers.mts

@@ -17,9 +17,14 @@ const logalot = GLOBAL_LOG_A_LOT;
  * @param {boolean} [details.prompt] - If true, shows a text input for prompting the user.
  * @returns {Promise<string | null>} - A promise that resolves with the text entered by the user (if prompt is true) or null if canceled/dismissed.
  */
-export async function showFullscreenDialog(opts: {
-    title: string,
-    msg: string,
+export interface FullscreenDialogController {
+    close: () => void;
+    update: (opts: { title?: string; msg?: string; animationEmoji?: string }) => void;
+}
+
+export interface ShowFullscreenDialogOpts {
+    title: string;
+    msg: string;
     /**
      * determines if to show the cancel button. does NOT control whether or not
      * we show the input control.
@@ -30,19 +35,36 @@ export async function showFullscreenDialog(opts: {
      *
      * @see {@link showInput}
      */
-    prompt?: boolean,
+    prompt?: boolean;
     /**
      * this flag determines if the user input field is shown. If this is truthy,
      * then {@link prompt} will be ignored and always set to `true`.
      *
      * @see {@link prompt}
      */
-    showInput?: boolean,
-    defaultValue?: string,
-    okButtonTitle?: string,
-    cancelButtonTitle?: string,
-    isPassword?: boolean,
-}): Promise<string | undefined> {
+    showInput?: boolean;
+    defaultValue?: string;
+    okButtonTitle?: string;
+    cancelButtonTitle?: string;
+    isPassword?: boolean;
+    isBusy?: boolean;
+    animationEmoji?: string;
+}
+
+export async function showFullscreenDialog(opts: ShowFullscreenDialogOpts & { isBusy: true }): Promise<FullscreenDialogController>;
+export async function showFullscreenDialog(opts: ShowFullscreenDialogOpts & { isBusy?: false }): Promise<string | undefined>;
+export async function showFullscreenDialog({
+    title,
+    msg,
+    prompt,
+    showInput,
+    defaultValue,
+    okButtonTitle,
+    cancelButtonTitle,
+    isPassword,
+    isBusy,
+    animationEmoji,
+}: ShowFullscreenDialogOpts): Promise<string | undefined | FullscreenDialogController> {
     const lc = `[${showFullscreenDialog.name}]`;
     try {
         if (logalot) { console.log(`${lc} starting... (I: 037b228a2568181cd3eb25dba4e03225)`); }
@@ -67,10 +89,10 @@ export async function showFullscreenDialog(opts: {
             throw new Error(`(UNEXPECTED) One or more dialog elements not found in DOM (E: 578e37c0271cc57a99e95e780ad18a25)`);
         }
 
-        titleElement.textContent = opts.title || '';
+        titleElement.textContent = title || '';
         [...messageElement.childNodes as any].forEach(child => messageElement.removeChild(child));
         // messageElement.innerHTML = '';
-        let msgLines = (opts.msg || '').split('\n');
+        let msgLines = (msg || '').split('\n');
         msgLines.forEach(line => {
             const pLine = document.createElement('p');
             pLine.textContent = line;
@@ -78,11 +100,24 @@ export async function showFullscreenDialog(opts: {
         });
         // messageElement.textContent = opts.msg || '';
 
-        // reset the input classList
+        // Add dynamic animation emoji if provided
+        if (animationEmoji) {
+            const animDiv = document.createElement('div');
+            animDiv.id = 'fullscreen-dialog-animation-emoji';
+            animDiv.textContent = animationEmoji;
+            animDiv.style.fontSize = '3.5rem';
+            animDiv.style.textAlign = 'center';
+            animDiv.style.margin = '1.5rem 0';
+            animDiv.style.animation = 'spin-bounce 5s infinite ease-in-out';
+            messageElement.appendChild(animDiv);
+        }
+
+        // reset the input classList and button displays
         promptInput.classList.remove('collapsed');
         cancelButton.classList.remove('collapsed');
         cancelButton.style.display = 'inline-block';
-        okButton.textContent = opts.okButtonTitle || 'OK';
+        okButton.style.display = 'inline-block';
+        okButton.textContent = okButtonTitle || 'OK';
 
         // Prompt-specific setup
         const onKeypress = (ev: KeyboardEvent) => {
@@ -93,15 +128,19 @@ export async function showFullscreenDialog(opts: {
             if (isEnter && ev.ctrlKey) { okButton.click(); }
         };
 
-        if (opts.prompt || opts.showInput) {
+        if (isBusy) {
+            promptInput.classList.add('collapsed');
+            cancelButton.style.display = 'none';
+            okButton.style.display = 'none';
+        } else if (prompt || showInput) {
             promptInput.addEventListener('keypress', onKeypress);
-            if (opts.showInput) {
+            if (showInput) {
                 promptInput.autofocus = true;
-                promptInput.value = opts.defaultValue ?? '';
+                promptInput.value = defaultValue ?? '';
                 promptInput.addEventListener('keypress', (ev) => {
                     if (ev.key === 'Enter') { okButton.click(); }
                 });
-                if (opts.isPassword) {
+                if (isPassword) {
                     promptInput.type = 'password';
                     promptInput.autocomplete = 'off';
                     promptInput.required = true;
@@ -115,18 +154,91 @@ export async function showFullscreenDialog(opts: {
                 promptInput.autofocus = false;
                 promptInput.classList.add('collapsed');
             }
-            cancelButton.textContent = opts.cancelButtonTitle || 'Cancel';
+            cancelButton.textContent = cancelButtonTitle || 'Cancel';
         } else {
             promptInput.classList.add('collapsed');    // Hide prompt input
             cancelButton.style.display = 'none';       // Hide cancel button for alerts
         }
 
-        return new Promise<string | undefined>((resolve) => {
+        return new Promise<any>((resolve) => {
+            if (isBusy) {
+                const onCancelEvent = (ev: Event) => {
+                    ev.preventDefault();
+                };
+                dialog.addEventListener('cancel', onCancelEvent);
+
+                const close = () => {
+                    dialog.removeEventListener('cancel', onCancelEvent);
+                    dialog.close();
+                };
+
+                const update = ({
+                    title: newTitle,
+                    msg: newMsg,
+                    animationEmoji: newEmoji,
+                }: {
+                    title?: string;
+                    msg?: string;
+                    animationEmoji?: string;
+                }) => {
+                    if (newTitle !== undefined) {
+                        titleElement.textContent = newTitle;
+                    }
+                    if (newMsg !== undefined) {
+                        // Clear non-emoji nodes
+                        [...messageElement.childNodes as any].forEach(child => {
+                            if (child.id !== 'fullscreen-dialog-animation-emoji') {
+                                messageElement.removeChild(child);
+                            }
+                        });
+                        // Insert new lines before the animation emoji
+                        let newMsgLines = newMsg.split('\n');
+                        const animDiv = document.getElementById('fullscreen-dialog-animation-emoji');
+                        newMsgLines.forEach(line => {
+                            const pLine = document.createElement('p');
+                            pLine.textContent = line;
+                            if (animDiv) {
+                                messageElement.insertBefore(pLine, animDiv);
+                            } else {
+                                messageElement.appendChild(pLine);
+                            }
+                        });
+                    }
+                    if (newEmoji !== undefined) {
+                        let animDiv = document.getElementById('fullscreen-dialog-animation-emoji');
+                        if (newEmoji) {
+                            if (!animDiv) {
+                                animDiv = document.createElement('div');
+                                animDiv.id = 'fullscreen-dialog-animation-emoji';
+                                animDiv.style.fontSize = '3.5rem';
+                                animDiv.style.textAlign = 'center';
+                                animDiv.style.margin = '1.5rem 0';
+                                animDiv.style.animation = 'spin-bounce 5s infinite ease-in-out';
+                                messageElement.appendChild(animDiv);
+                            }
+                            animDiv.textContent = newEmoji;
+                        } else if (animDiv) {
+                            animDiv.remove();
+                        }
+                    }
+                };
+
+                if (!dialog.open) {
+                    dialog.showModal();
+                }
+                delay(1000).then(() => {
+                    dialogBody.scrollTo({ top: 0, behavior: 'smooth' });
+                });
+
+                resolve({ close, update });
+                return;
+            }
+
             // handlers
 
             /** helper used in other handlers */
             const removeEventListeners = () => {
-                if (opts.prompt || opts.showInput) {
+                if (prompt || showInput) {
                     promptInput.removeEventListener('keypress', onKeypress);
                 }
                 okButton.removeEventListener('click', onOK);
@@ -136,7 +248,7 @@ export async function showFullscreenDialog(opts: {
             /** user clicks OK or hits "ENTER" in input */
             const onOK = () => {
                 removeEventListeners();
-                let result = opts.showInput ?
+                let result = showInput ?
                     promptInput.value ?? '' :
                     true.toString();
                 if (promptInput) { promptInput.value = ''; } // Clear input for next time
@@ -170,7 +282,9 @@ export async function showFullscreenDialog(opts: {
             dialog.addEventListener('close', onClose); // e.g. escape key
 
             // show it
-            dialog.showModal();
+            if (!dialog.open) {
+                dialog.showModal();
+            }
             delay(1000).then(() => {
                 dialogBody.scrollTo({ top: 0, behavior: 'smooth' });
             });

package/tools/auto-generated-agent-skills/skills/ibgib-create-component/SKILL.md

@@ -7,6 +7,8 @@ description: Scaffolds a new reusable ibgib UI component. Generates the componen
 
 This skill scaffolds a new UI component for an ibgib application. components are implemented as Web Components (Custom Elements) using the `ibgib-web-gib` framework, which provides deep integration with ibgib timelines and real-time updates.
 
+For more documentation, refer to the ibgib component [README.md](libs\web-gib\src\ui\component\README.md)
+
 ## Goal
 To create a standard, reactive UI component that can be registered with the `ibgib-component-service` and rendered within an app shell.
 
@@ -20,14 +22,16 @@ Wait for the user to provide or confirm these tokens:
 
 ## Output Files
 The skill will generate:
-1. `src/components/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.mts`
-2. `src/components/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.html`
-3. `src/components/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.css`
+1. `src/components/{{COMPONENT_NAME}}/IMPLEMENTATION.md` (Design spec, requirements, and checklist)
+2. `src/components/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.mts`
+3. `src/components/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.html`
+4. `src/components/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.css`
 
 ## Usage Instructions
 1. Ensure the `src/components/{{COMPONENT_NAME}}` directory exists.
-2. Generate the files from templates.
-3. Import and register the `{{COMPONENT_CLASS_PREFIX}}ComponentMeta` in your `ShellService`'s `registerComponents()` method.
+2. Before scaffolding the code, create the `IMPLEMENTATION.md` file detailing the core layout, settings, requirements, and an implementation checklist.
+3. Generate the implementation files (.mts, .html, .css) from templates matching the specifications in the implementation plan.
+4. Import and register the `{{COMPONENT_CLASS_PREFIX}}ComponentMeta` in your `ShellService`'s `registerComponents()` method.
 
 ## Component Lifecycle
 - `initialize(opts)`: Called when the component is first given an ibGib address.