npm - rook-cli - Versions diffs - 1.3.2 → 1.3.5 - Mend

rook-cli 1.3.2 → 1.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (92) hide show

package/package.json +3 -2
package/rook-framework/PRD-INSTALL-COMMAND.md +379 -0
package/rook-framework/PRD.md +1214 -0
package/rook-framework/README.md +143 -0
package/rook-framework/assets/rk-accordion.js +99 -0
package/rook-framework/assets/rk-alert-dialog.js +132 -0
package/rook-framework/assets/rk-bottom-app-bar.js +88 -0
package/rook-framework/assets/rk-carousel.js +145 -0
package/rook-framework/assets/rk-collapsible.js +151 -0
package/rook-framework/assets/rk-dialog.js +161 -0
package/rook-framework/assets/rk-drawer.js +214 -0
package/rook-framework/assets/rk-framework-core.css +2554 -0
package/rook-framework/assets/rk-framework-tokens.css +101 -0
package/rook-framework/assets/rk-modal.js +91 -0
package/rook-framework/assets/rk-popover.js +264 -0
package/rook-framework/assets/rk-progress.js +81 -0
package/rook-framework/assets/rk-quantity.js +91 -0
package/rook-framework/assets/rk-scroll-area.js +286 -0
package/rook-framework/assets/rk-sheet.js +157 -0
package/rook-framework/assets/rk-tabs.js +179 -0
package/rook-framework/assets/rk-toggle.js +153 -0
package/rook-framework/blocks/rk-accordion.liquid +97 -0
package/rook-framework/blocks/rk-badge.liquid +103 -0
package/rook-framework/blocks/rk-button.liquid +166 -0
package/rook-framework/blocks/rk-divider.liquid +100 -0
package/rook-framework/blocks/rk-form-field.liquid +120 -0
package/rook-framework/blocks/rk-icon.liquid +134 -0
package/rook-framework/blocks/rk-image.liquid +198 -0
package/rook-framework/blocks/rk-installments.liquid +99 -0
package/rook-framework/blocks/rk-pix-discount.liquid +99 -0
package/rook-framework/blocks/rk-price.liquid +128 -0
package/rook-framework/blocks/rk-quantity.liquid +108 -0
package/rook-framework/blocks/rk-quick-add.liquid +137 -0
package/rook-framework/blocks/rk-skeleton.liquid +104 -0
package/rook-framework/blocks/rk-typography.liquid +183 -0
package/rook-framework/config/rk-color-scheme-group.json +138 -0
package/rook-framework/config/rk-settings_schema.json +259 -0
package/rook-framework/snippets/rk-accordion.liquid +31 -0
package/rook-framework/snippets/rk-alert-dialog.liquid +83 -0
package/rook-framework/snippets/rk-aspect-ratio.liquid +23 -0
package/rook-framework/snippets/rk-badge.liquid +17 -0
package/rook-framework/snippets/rk-bottom-app-bar.liquid +51 -0
package/rook-framework/snippets/rk-button.liquid +49 -0
package/rook-framework/snippets/rk-card.liquid +64 -0
package/rook-framework/snippets/rk-carousel.liquid +74 -0
package/rook-framework/snippets/rk-checkbox.liquid +34 -0
package/rook-framework/snippets/rk-collapsible.liquid +52 -0
package/rook-framework/snippets/rk-color-schemes-standalone.liquid +61 -0
package/rook-framework/snippets/rk-color-schemes.liquid +43 -0
package/rook-framework/snippets/rk-dialog.liquid +85 -0
package/rook-framework/snippets/rk-divider.liquid +25 -0
package/rook-framework/snippets/rk-drawer.liquid +81 -0
package/rook-framework/snippets/rk-external-assets copy.liquid +33 -0
package/rook-framework/snippets/rk-external-assets.liquid +68 -0
package/rook-framework/snippets/rk-form-field.liquid +83 -0
package/rook-framework/snippets/rk-gap-style.liquid +32 -0
package/rook-framework/snippets/rk-icon.liquid +28 -0
package/rook-framework/snippets/rk-image.liquid +60 -0
package/rook-framework/snippets/rk-input.liquid +35 -0
package/rook-framework/snippets/rk-installments.liquid +54 -0
package/rook-framework/snippets/rk-item.liquid +69 -0
package/rook-framework/snippets/rk-layout-style.liquid +37 -0
package/rook-framework/snippets/rk-modal.liquid +31 -0
package/rook-framework/snippets/rk-pix-discount.liquid +34 -0
package/rook-framework/snippets/rk-popover.liquid +77 -0
package/rook-framework/snippets/rk-price.liquid +48 -0
package/rook-framework/snippets/rk-progress.liquid +38 -0
package/rook-framework/snippets/rk-quantity.liquid +56 -0
package/rook-framework/snippets/rk-quick-add.liquid +67 -0
package/rook-framework/snippets/rk-scripts.liquid +17 -0
package/rook-framework/snippets/rk-scroll-area.liquid +60 -0
package/rook-framework/snippets/rk-sheet.liquid +86 -0
package/rook-framework/snippets/rk-size-style.liquid +48 -0
package/rook-framework/snippets/rk-skeleton.liquid +25 -0
package/rook-framework/snippets/rk-spacing-padding.liquid +18 -0
package/rook-framework/snippets/rk-spacing-style.liquid +54 -0
package/rook-framework/snippets/rk-spinner.liquid +43 -0
package/rook-framework/snippets/rk-swatch.liquid +33 -0
package/rook-framework/snippets/rk-table.liquid +44 -0
package/rook-framework/snippets/rk-tabs.liquid +52 -0
package/rook-framework/snippets/rk-textarea.liquid +42 -0
package/rook-framework/snippets/rk-toggle-group.liquid +27 -0
package/rook-framework/snippets/rk-toggle.liquid +58 -0
package/rook-framework/snippets/rk-typography.liquid +27 -0
package/rook-framework/snippets/rk-variables.liquid +76 -0
package/src/app.js +24 -0
package/src/commands/InstallCommand.js +133 -0
package/src/mcp/server.js +111 -1
package/src/services/FrameworkInstaller.js +485 -0
package/src/templates/block.liquid.txt +0 -15
package/src/ui/PromptUI.js +15 -1
package/src/utils/logger.js +1 -1

package/rook-framework/README.md ADDED Viewed

@@ -0,0 +1,143 @@
+# Rook UI Core Framework
+> Biblioteca de componentes UI agnóstica para Shopify — portável entre temas.
+## Instalação Rápida
+### Automática (recomendado)
+```bash
+rook install
+```
+### Manual
+#### 1. Copiar arquivos para o tema
+```bash
+# Assets (CSS + JS)
+cp rook-framework/assets/* assets/
+# Snippets (Liquid)
+cp rook-framework/snippets/* snippets/
+# Blocks (Liquid)
+cp rook-framework/blocks/* blocks/
+```
+#### 2. Injetar configurações
+Abra `config/settings_schema.json` e adicione cada objeto do array de `rook-framework/config/rk-settings_schema.json` como novos itens no final do array principal (são 4 seções: Cores, Forma e Transição, Parcelamento, Pix).
+#### 3. Carregar no layout
+Adicione ao `layout/theme.liquid` (dentro do `<head>`, antes de `{{ content_for_header }}`):
+```liquid
+{%- comment -%} Rook UI Core Framework {%- endcomment -%}
+{%- render 'rk-variables' -%}
+{{ 'rk-framework-tokens.css' | asset_url | stylesheet_tag }}
+{{ 'rk-framework-core.css' | asset_url | stylesheet_tag }}
+{%- render 'rk-external-assets', location: 'head' -%}
+```
+E antes do `</body>`:
+```liquid
+{%- comment -%} Rook UI Core Framework — Scripts {%- endcomment -%}
+{%- render 'rk-external-assets', location: 'body' -%}
+{%- render 'rk-scripts' -%}
+```
+## Ordem de Carregamento
+1. **`rk-variables`** — CSS vars dinâmicas geradas via Liquid (`{% style %}`)
+2. **`rk-framework-tokens.css`** — Tokens estáticos (spacing, typography, z-index)
+3. **`rk-framework-core.css`** — Estilos BEM de todos os componentes
+4. **`rk-external-assets`** (head) — Preconnects e CDNs externas
+5. **`rk-external-assets`** (body) — Scripts externos (Swiper, etc)
+6. **`rk-scripts`** — Web Components JS do framework
+## Uso
+```liquid
+{% render 'rk-button', text: 'Comprar', style: 'primary', size: 'lg' %}
+{% render 'rk-price', product: product, from: true %}
+{% render 'rk-installments', price: variant.price %}
+{% render 'rk-pix-discount', price: variant.price %}
+{% render 'rk-quantity', value: 1, min: 1, max: 10 %}
+{% render 'rk-quick-add', product: product, section_id: section.id, show_quantity: true %}
+```
+## Componentes
+### Átomos (14)
+| Componente | Arquivo |
+|---|---|
+| Button | `rk-button.liquid` |
+| Image | `rk-image.liquid` |
+| Icon | `rk-icon.liquid` |
+| Input | `rk-input.liquid` |
+| Textarea | `rk-textarea.liquid` |
+| Checkbox | `rk-checkbox.liquid` |
+| Badge | `rk-badge.liquid` |
+| Typography | `rk-typography.liquid` |
+| Divider | `rk-divider.liquid` |
+| Skeleton | `rk-skeleton.liquid` |
+| Swatch | `rk-swatch.liquid` |
+| Aspect Ratio | `rk-aspect-ratio.liquid` |
+| Item | `rk-item.liquid` |
+| Spinner | `rk-spinner.liquid` |
+### Moléculas (21)
+| Componente | Arquivo | Controller |
+|---|---|---|
+| Card | `rk-card.liquid` | — |
+| Price | `rk-price.liquid` | — |
+| Installments | `rk-installments.liquid` | — |
+| Pix Discount | `rk-pix-discount.liquid` | — |
+| Quantity | `rk-quantity.liquid` | `rk-quantity.js` |
+| Accordion | `rk-accordion.liquid` | `rk-accordion.js` |
+| Form Field | `rk-form-field.liquid` | — |
+| Modal | `rk-modal.liquid` | `rk-modal.js` |
+| Popover | `rk-popover.liquid` | `rk-popover.js` |
+| Scroll Area | `rk-scroll-area.liquid` | `rk-scroll-area.js` |
+| Drawer | `rk-drawer.liquid` | `rk-drawer.js` |
+| Dialog | `rk-dialog.liquid` | `rk-dialog.js` |
+| Sheet | `rk-sheet.liquid` | `rk-sheet.js` |
+| Table | `rk-table.liquid` | — |
+| Tabs | `rk-tabs.liquid` | `rk-tabs.js` |
+| Toggle | `rk-toggle.liquid` | `rk-toggle.js` |
+| Toggle Group | `rk-toggle-group.liquid` | `rk-toggle.js` |
+| Progress | `rk-progress.liquid` | `rk-progress.js` |
+| Collapsible | `rk-collapsible.liquid` | `rk-collapsible.js` |
+| Carousel | `rk-carousel.liquid` | `rk-carousel.js` |
+| Bottom App Bar | `rk-bottom-app-bar.liquid` | `rk-bottom-app-bar.js` |
+| Quick Add | `rk-quick-add.liquid` | Horizon `quick-add.js` |
+### Serviços (2)
+| Componente | Arquivo |
+|---|---|
+| External Assets | `rk-external-assets.liquid` |
+| Scripts Loader | `rk-scripts.liquid` |
+### Settings (4 seções no painel Shopify)
+| Seção | Settings |
+|---|---|
+| Rook UI — Cores | 13 cores (primárias, secundárias, fundos, semânticas, texto, bordas, foco) |
+| Rook UI — Forma e Transição | 4 border-radius + velocidade transição |
+| Rook UI — Parcelamento | 5 configs de parcelamento |
+| Rook UI — Pix | 3 configs de desconto Pix |
+## Documentação Completa
+Consulte o [PRD.md](PRD.md) para detalhes de arquitetura, props, events e guias.
+## Licença
+Proprietário — Chesslab

package/rook-framework/assets/rk-accordion.js ADDED Viewed

@@ -0,0 +1,99 @@
+/* ==========================================================================
+   Rook UI Core — Accordion Controller
+   Web Component: <rk-accordion-element>
+   ========================================================================== */
+if (!customElements.get('rk-accordion-element')) {
+    class RkAccordionElement extends HTMLElement {
+        constructor() {
+            super();
+            this.details = null;
+            this.content = null;
+            this.animation = null;
+            this.isClosing = false;
+            this.isExpanding = false;
+        }
+        connectedCallback() {
+            this.details = this.querySelector('details');
+            this.content = this.querySelector('.rk-accordion__content');
+            if (!this.details || !this.content) return;
+            const summary = this.details.querySelector('summary');
+            if (summary) {
+                summary.addEventListener('click', (e) => this.onClick(e));
+            }
+        }
+        onClick(e) {
+            e.preventDefault();
+            this.details.style.overflow = 'hidden';
+            if (this.isClosing || !this.details.open) {
+                this.open();
+            } else if (this.isExpanding || this.details.open) {
+                this.shrink();
+            }
+        }
+        shrink() {
+            this.isClosing = true;
+            const startHeight = `${this.details.offsetHeight}px`;
+            const summary = this.details.querySelector('summary');
+            const endHeight = `${summary.offsetHeight}px`;
+            if (this.animation) {
+                this.animation.cancel();
+            }
+            this.animation = this.details.animate(
+                { height: [startHeight, endHeight] },
+                { duration: 200, easing: 'ease-out' }
+            );
+            this.animation.onfinish = () => this.onAnimationFinish(false);
+            this.animation.oncancel = () => (this.isClosing = false);
+        }
+        open() {
+            this.details.style.height = `${this.details.offsetHeight}px`;
+            this.details.open = true;
+            window.requestAnimationFrame(() => this.expand());
+        }
+        expand() {
+            this.isExpanding = true;
+            const startHeight = `${this.details.offsetHeight}px`;
+            const summary = this.details.querySelector('summary');
+            const endHeight = `${summary.offsetHeight + this.content.offsetHeight}px`;
+            if (this.animation) {
+                this.animation.cancel();
+            }
+            this.animation = this.details.animate(
+                { height: [startHeight, endHeight] },
+                { duration: 200, easing: 'ease-out' }
+            );
+            this.animation.onfinish = () => this.onAnimationFinish(true);
+            this.animation.oncancel = () => (this.isExpanding = false);
+        }
+        onAnimationFinish(open) {
+            this.details.open = open;
+            this.animation = null;
+            this.isClosing = false;
+            this.isExpanding = false;
+            this.details.style.height = '';
+            this.details.style.overflow = '';
+        }
+    }
+    customElements.define('rk-accordion-element', RkAccordionElement);
+}

package/rook-framework/assets/rk-alert-dialog.js ADDED Viewed

@@ -0,0 +1,132 @@
+/* ==========================================================================
+   Rook UI Core — Alert Dialog Controller
+   Web Component: <rk-alert-dialog-element>
+   ========================================================================== */
+if (!customElements.get('rk-alert-dialog-element')) {
+    class RkAlertDialogElement extends HTMLElement {
+        constructor() {
+            super();
+            this.dialog = null;
+            this.previousFocus = null;
+            this.focusableElements = [];
+        }
+        connectedCallback() {
+            this.dialog = this.querySelector('.rk-alert-dialog');
+            if (!this.dialog) return;
+            this._bindEvents();
+            this._setupOpenTriggers();
+        }
+        /* ------------------------------------------------------------------ */
+        /*  Events                                                            */
+        /* ------------------------------------------------------------------ */
+        _bindEvents() {
+            // Cancel buttons close the dialog
+            this.querySelectorAll('[data-action="cancel"]').forEach((el) => {
+                el.addEventListener('click', () => this.close('cancel'));
+            });
+            // Action buttons fire confirm then close
+            this.querySelectorAll('[data-action="confirm"]').forEach((el) => {
+                el.addEventListener('click', () => {
+                    this.dispatchEvent(
+                        new CustomEvent('rk:alert-dialog:confirm', {
+                            bubbles: true,
+                            detail: { id: this.dialog.id },
+                        })
+                    );
+                    // Don't auto-close: let consumer decide (e.g. loading state)
+                });
+            });
+            // ESC key — configurable via data-esc-close
+            this._onKeyDown = (e) => {
+                if (e.key === 'Escape' && this.isOpen()) {
+                    const escClose = this.dataset.escClose !== 'false';
+                    if (escClose) {
+                        e.preventDefault();
+                        this.close('cancel');
+                    }
+                }
+            };
+            // NOTE: overlay click does NOT close (per PRD requirement)
+        }
+        _setupOpenTriggers() {
+            const dialogId = this.dataset.alertDialogId || this.dialog?.id;
+            if (!dialogId) return;
+            document.querySelectorAll(`[data-alert-dialog-open="${dialogId}"]`).forEach((trigger) => {
+                trigger.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.open();
+                });
+            });
+        }
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+        isOpen() {
+            return this.dialog?.classList.contains('rk-alert-dialog--active');
+        }
+        open() {
+            if (!this.dialog || this.isOpen()) return;
+            this.previousFocus = document.activeElement;
+            this.dialog.classList.add('rk-alert-dialog--active');
+            document.body.style.overflow = 'hidden';
+            document.addEventListener('keydown', this._onKeyDown);
+            // Focus the cancel button by default (safety: prevent accidental confirm)
+            requestAnimationFrame(() => {
+                const cancelBtn = this.dialog.querySelector('[data-action="cancel"]');
+                if (cancelBtn) {
+                    cancelBtn.focus();
+                } else {
+                    // Fallback: first focusable element
+                    const first = this.dialog.querySelector(
+                        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                    );
+                    if (first) first.focus();
+                }
+            });
+            this.dispatchEvent(
+                new CustomEvent('rk:alert-dialog:open', {
+                    bubbles: true,
+                    detail: { id: this.dialog.id },
+                })
+            );
+        }
+        close(reason) {
+            if (!this.dialog || !this.isOpen()) return;
+            this.dialog.classList.remove('rk-alert-dialog--active');
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', this._onKeyDown);
+            if (this.previousFocus) {
+                this.previousFocus.focus();
+                this.previousFocus = null;
+            }
+            this.dispatchEvent(
+                new CustomEvent('rk:alert-dialog:close', {
+                    bubbles: true,
+                    detail: { id: this.dialog.id, reason: reason || 'cancel' },
+                })
+            );
+        }
+    }
+    customElements.define('rk-alert-dialog-element', RkAlertDialogElement);
+}

package/rook-framework/assets/rk-bottom-app-bar.js ADDED Viewed

@@ -0,0 +1,88 @@
+/* ==========================================================================
+   Rook UI Core — Bottom App Bar Controller
+   Web Component: <rk-bottom-app-bar-element>
+   ========================================================================== */
+if (!customElements.get('rk-bottom-app-bar-element')) {
+    class RkBottomAppBarElement extends HTMLElement {
+        constructor() {
+            super();
+            this.items = [];
+            this._onKeyDown = this._onKeyDown.bind(this);
+        }
+        connectedCallback() {
+            // Setup Menubar Role if missing
+            if (!this.hasAttribute('role')) {
+                this.setAttribute('role', 'menubar');
+            }
+            this.items = Array.from(this.querySelectorAll('[role="menuitem"]'));
+            // Allow focus only on the first item initially
+            this.items.forEach((item, index) => {
+                if (index === 0) {
+                    item.setAttribute('tabindex', '0');
+                } else {
+                    item.setAttribute('tabindex', '-1');
+                }
+            });
+            this.addEventListener('keydown', this._onKeyDown);
+        }
+        disconnectedCallback() {
+            this.removeEventListener('keydown', this._onKeyDown);
+        }
+        /* ------------------------------------------------------------------ */
+        /*  Roving Tabindex & ARIA Keyboard Navigation                        */
+        /* ------------------------------------------------------------------ */
+        _onKeyDown(e) {
+            const currentItem = document.activeElement;
+            const currentIndex = this.items.indexOf(currentItem);
+            if (currentIndex === -1) return; // Focus isn't on an item
+            let nextIndex = currentIndex;
+            switch (e.key) {
+                case 'ArrowRight':
+                    e.preventDefault();
+                    nextIndex = (currentIndex + 1) % this.items.length;
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    nextIndex = (currentIndex - 1 + this.items.length) % this.items.length;
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    nextIndex = 0;
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    nextIndex = this.items.length - 1;
+                    break;
+                case 'ArrowUp':
+                    // If the item controls a popover or dropdown, we might proxy it
+                    // But usually, standard Enter/Space handles trigger. The PRD mentions ArrowUp logic for menus.
+                    // If there's an upward popover attached, we simulate a click or open it.
+                    if (currentItem.hasAttribute('aria-haspopup')) {
+                        e.preventDefault();
+                        currentItem.click();
+                    }
+                    return; // Early return, don't move focus right/left
+                default:
+                    return; // Ignore other keys
+            }
+            // Move focus
+            this.items[currentIndex].setAttribute('tabindex', '-1');
+            this.items[nextIndex].setAttribute('tabindex', '0');
+            this.items[nextIndex].focus();
+        }
+    }
+    customElements.define('rk-bottom-app-bar-element', RkBottomAppBarElement);
+}

package/rook-framework/assets/rk-carousel.js ADDED Viewed

@@ -0,0 +1,145 @@
+/* ==========================================================================
+   Rook UI Core — Carousel Controller
+   Web Component: <rk-carousel-element>
+   Powered by Swiper.js (Lazy Loaded via CDN)
+   ========================================================================== */
+if (!customElements.get('rk-carousel-element')) {
+    class RkCarouselElement extends HTMLElement {
+        constructor() {
+            super();
+            this.swiper = null;
+            this.options = {};
+        }
+        async connectedCallback() {
+            await this._loadSwiper();
+            this._initSwiper();
+            // Resize observer for breakpoints updates/recalculation
+            if (window.ResizeObserver) {
+                this.resizeObserver = new ResizeObserver(() => {
+                    if (this.swiper && typeof this.swiper.update === 'function') {
+                        this.swiper.update();
+                    }
+                });
+                this.resizeObserver.observe(this);
+            }
+        }
+        disconnectedCallback() {
+            if (this.swiper && typeof this.swiper.destroy === 'function') {
+                this.swiper.destroy(true, true);
+                this.swiper = null;
+            }
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+            }
+        }
+        async _loadSwiper() {
+            // Check if Swiper is already on window
+            if (window.Swiper) return;
+            // Wait for concurrent loads if another carousel is fetching it
+            if (window.RkSwiperLoading) {
+                return window.RkSwiperLoading;
+            }
+            window.RkSwiperLoading = new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
+                const style = document.createElement('link');
+                style.rel = 'stylesheet';
+                style.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
+                script.onload = () => resolve();
+                script.onerror = reject;
+                document.head.appendChild(style);
+                document.head.appendChild(script);
+            });
+            return window.RkSwiperLoading;
+        }
+        _initSwiper() {
+            const container = this.querySelector('.swiper');
+            if (!container) return;
+            // Read dataset options for customized parameters
+            const rawOptions = this.getAttribute('data-swiper-options');
+            if (rawOptions) {
+                try {
+                    this.options = JSON.parse(rawOptions);
+                } catch (e) {
+                    console.error('Invalid Swiper options JSON:', e);
+                }
+            }
+            // Fallback attribute reading for clean API
+            const gap = parseInt(this.getAttribute('data-gap')) || 0;
+            const deskItems = parseFloat(this.getAttribute('data-desktop-items')) || 3;
+            const mobileItems = parseFloat(this.getAttribute('data-mobile-items')) || 1;
+            const defaultOptions = {
+                slidesPerView: mobileItems,
+                spaceBetween: gap,
+                navigation: {
+                    nextEl: this.querySelector('.swiper-button-next'),
+                    prevEl: this.querySelector('.swiper-button-prev'),
+                },
+                pagination: {
+                    el: this.querySelector('.swiper-pagination'),
+                    clickable: true,
+                },
+                loop: this.hasAttribute('data-loop') && this.getAttribute('data-loop') !== 'false',
+                autoplay: this.hasAttribute('data-autoplay') ? {
+                    delay: parseInt(this.getAttribute('data-autoplay-delay')) || 3000,
+                    disableOnInteraction: false,
+                } : false,
+                freeMode: this.hasAttribute('data-free-mode'),
+                breakpoints: this.options.breakpoints || {
+                    768: {
+                        slidesPerView: deskItems
+                    }
+                },
+                // Accessibility features native to Swiper
+                a11y: {
+                    enabled: true,
+                    prevSlideMessage: 'Slide Anterior',
+                    nextSlideMessage: 'Próximo Slide',
+                }
+            };
+            // Merge passed options directly, allowing deep overrides
+            const finalOptions = { ...defaultOptions, ...this.options };
+            // Initialize virtual component integration
+            this.swiper = new window.Swiper(container, finalOptions);
+            this.dispatchEvent(new CustomEvent('rk:carousel:init', {
+                bubbles: true,
+                detail: { swiper: this.swiper }
+            }));
+        }
+        /* ------------------------------------------------------------------ */
+        /*  Public API methods for external buttons / programmatic flow     */
+        /* ------------------------------------------------------------------ */
+        slideNext() {
+            if (this.swiper) this.swiper.slideNext();
+        }
+        slidePrev() {
+            if (this.swiper) this.swiper.slidePrev();
+        }
+        slideTo(index) {
+            if (this.swiper) this.swiper.slideTo(index);
+        }
+    }
+    customElements.define('rk-carousel-element', RkCarouselElement);
+}