rook-cli 1.3.2 → 1.3.4

package/rook-framework/assets/rk-collapsible.js

@@ -0,0 +1,151 @@
+/* ==========================================================================
+   Rook UI Core — Collapsible Controller
+   Web Component: <rk-collapsible-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-collapsible-element')) {
+    class RkCollapsibleElement extends HTMLElement {
+        constructor() {
+            super();
+            this.trigger = null;
+            this.content = null;
+            this.isOpen = false;
+
+            this._onClick = this._onClick.bind(this);
+            this._handleExternalToggle = this._handleExternalToggle.bind(this);
+        }
+
+        connectedCallback() {
+            this.trigger = this.querySelector('.rk-collapsible__trigger');
+            this.content = this.querySelector('.rk-collapsible__content');
+
+            if (!this.content) return;
+
+            // State init
+            const defaultOpen = this.hasAttribute('data-open') && this.getAttribute('data-open') !== 'false';
+            this.isOpen = defaultOpen;
+
+            this._syncState(false); // sync without animation initially
+
+            // Event binding
+            if (this.trigger) {
+                this.trigger.addEventListener('click', this._onClick);
+            }
+
+            // Expose public API events listeners for external triggers
+            this.addEventListener('rk:collapsible:open', () => this.open());
+            this.addEventListener('rk:collapsible:close', () => this.close());
+            this.addEventListener('rk:collapsible:toggle', () => this.toggle());
+
+            const id = this.getAttribute('id');
+            if (id) {
+                document.addEventListener('click', this._handleExternalToggle);
+            }
+        }
+
+        disconnectedCallback() {
+            if (this.trigger) {
+                this.trigger.removeEventListener('click', this._onClick);
+            }
+            document.removeEventListener('click', this._handleExternalToggle);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        open() {
+            if (this.isOpen) return;
+            this.isOpen = true;
+            this._syncState(true);
+        }
+
+        close() {
+            if (!this.isOpen) return;
+            this.isOpen = false;
+            this._syncState(true);
+        }
+
+        toggle() {
+            if (this.isOpen) {
+                this.close();
+            } else {
+                this.open();
+            }
+        }
+
+        _onClick(e) {
+            e.preventDefault();
+            if (this.trigger && this.trigger.disabled) return;
+            this.toggle();
+        }
+
+        _handleExternalToggle(e) {
+            const externalBtn = e.target.closest(`[data-collapsible-toggle="${this.id}"]`);
+            if (externalBtn) {
+                e.preventDefault();
+                this.toggle();
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  DOM Sync                                                          */
+        /* ------------------------------------------------------------------ */
+
+        _syncState(animate = true) {
+            // Manage classes for animation (CSS Grid 0fr -> 1fr approach)
+            if (this.isOpen) {
+                this.classList.add('rk-collapsible--open');
+                this.content.removeAttribute('hidden');
+
+                // Allow CSS transition to kick in if animating
+                requestAnimationFrame(() => {
+                    this.content.classList.add('rk-collapsible__content--expanded');
+                });
+            } else {
+                this.classList.remove('rk-collapsible--open');
+                this.content.classList.remove('rk-collapsible__content--expanded');
+
+                // If not animating, hide immediately
+                if (!animate) {
+                    this.content.setAttribute('hidden', 'true');
+                } else {
+                    // Wait for CSS transition (typically 300ms) before hiding from screen readers
+                    // We use an explicit listener or timeout. Timeout is safer if transition gets cancelled.
+                    clearTimeout(this._hideTimeout);
+                    this._hideTimeout = setTimeout(() => {
+                        if (!this.isOpen) {
+                            this.content.setAttribute('hidden', 'true');
+                        }
+                    }, 300); // Must match CSS duration
+                }
+            }
+
+            // A11y
+            if (this.trigger) {
+                this.trigger.setAttribute('aria-expanded', this.isOpen.toString());
+            }
+
+            // Focus management inside content
+            const focusables = this.content.querySelectorAll('a, button, input, select, textarea, [tabindex]');
+            focusables.forEach(el => {
+                if (this.isOpen) {
+                    el.removeAttribute('tabindex');
+                } else {
+                    // Force unfocusable
+                    el.setAttribute('tabindex', '-1');
+                }
+            });
+
+            // Dispatch event
+            this.dispatchEvent(
+                new CustomEvent('rk:collapsible:change', {
+                    bubbles: true,
+                    detail: { isOpen: this.isOpen },
+                })
+            );
+        }
+    }
+
+    customElements.define('rk-collapsible-element', RkCollapsibleElement);
+}

package/rook-framework/assets/rk-dialog.js

@@ -0,0 +1,161 @@
+/* ==========================================================================
+   Rook UI Core — Dialog Controller
+   Web Component: <rk-dialog-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-dialog-element')) {
+    class RkDialogElement extends HTMLElement {
+        constructor() {
+            super();
+            this.dialog = null;
+            this.overlay = null;
+            this.content = null;
+            this.previousFocus = null;
+
+            this._onKeyDown = this._onKeyDown.bind(this);
+        }
+
+        connectedCallback() {
+            this.dialog = this.querySelector('.rk-dialog');
+            this.overlay = this.querySelector('.rk-dialog__overlay');
+            this.content = this.querySelector('.rk-dialog__content');
+
+            if (!this.dialog) return;
+
+            this._bindEvents();
+            this._setupOpenTriggers();
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Events                                                            */
+        /* ------------------------------------------------------------------ */
+
+        _bindEvents() {
+            // Close button
+            this.querySelectorAll('[data-action="close"]').forEach((el) => {
+                el.addEventListener('click', () => this.close());
+            });
+
+            // Overlay click (configurable)
+            if (this.overlay) {
+                const overlayClose = this.dataset.overlayClose !== 'false';
+                if (overlayClose) {
+                    this.overlay.addEventListener('click', () => this.close());
+                }
+            }
+        }
+
+        _setupOpenTriggers() {
+            const dialogId = this.dataset.dialogId || this.dialog?.id;
+            if (!dialogId) return;
+
+            document.querySelectorAll(`[data-dialog-open="${dialogId}"]`).forEach((trigger) => {
+                trigger.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.open();
+                });
+            });
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        isOpen() {
+            return this.dialog?.classList.contains('rk-dialog--active');
+        }
+
+        open() {
+            if (!this.dialog || this.isOpen()) return;
+
+            this.previousFocus = document.activeElement;
+            this.dialog.classList.add('rk-dialog--active');
+            document.body.style.overflow = 'hidden';
+            document.addEventListener('keydown', this._onKeyDown);
+
+            // Focus first interactive element inside content
+            requestAnimationFrame(() => {
+                const firstFocusable = this.content?.querySelector(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            });
+
+            this.dispatchEvent(
+                new CustomEvent('rk:dialog:open', {
+                    bubbles: true,
+                    detail: { id: this.dialog.id },
+                })
+            );
+        }
+
+        close() {
+            if (!this.dialog || !this.isOpen()) return;
+
+            this.dialog.classList.remove('rk-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:dialog:close', {
+                    bubbles: true,
+                    detail: { id: this.dialog.id },
+                })
+            );
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Keyboard handling (ESC + Tab trap)                                */
+        /* ------------------------------------------------------------------ */
+
+        _onKeyDown(e) {
+            if (!this.isOpen()) return;
+
+            // ESC to close
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+                return;
+            }
+
+            // Tab trap
+            if (e.key === 'Tab') {
+                this._trapFocus(e);
+            }
+        }
+
+        _trapFocus(e) {
+            const focusable = this.content?.querySelectorAll(
+                'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+            );
+
+            if (!focusable || focusable.length === 0) return;
+
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+
+            if (e.shiftKey) {
+                // Shift+Tab: if focus is on first, wrap to last
+                if (document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            } else {
+                // Tab: if focus is on last, wrap to first
+                if (document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        }
+    }
+
+    customElements.define('rk-dialog-element', RkDialogElement);
+}

package/rook-framework/assets/rk-drawer.js

@@ -0,0 +1,214 @@
+/* ==========================================================================
+   Rook UI Core — Drawer Controller
+   Web Component: <rk-drawer-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-drawer-element')) {
+    class RkDrawerElement extends HTMLElement {
+        constructor() {
+            super();
+            this.drawer = null;
+            this.overlay = null;
+            this.panel = null;
+            this.handle = null;
+            this.previousFocus = null;
+            this.focusableElements = [];
+
+            // Drag state
+            this._dragging = false;
+            this._startY = 0;
+            this._startX = 0;
+            this._currentTranslate = 0;
+            this._dismissThreshold = 0.3; // 30% of panel size to dismiss
+
+            this._onPointerMove = this._onPointerMove.bind(this);
+            this._onPointerUp = this._onPointerUp.bind(this);
+        }
+
+        connectedCallback() {
+            this.drawer = this.querySelector('.rk-drawer');
+            this.overlay = this.querySelector('.rk-drawer__overlay');
+            this.panel = this.querySelector('.rk-drawer__panel');
+            this.handle = this.querySelector('.rk-drawer__handle');
+
+            if (!this.drawer || !this.panel) return;
+
+            this._bindEvents();
+            this._setupOpenTriggers();
+        }
+
+        disconnectedCallback() {
+            document.removeEventListener('pointermove', this._onPointerMove);
+            document.removeEventListener('pointerup', this._onPointerUp);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Events                                                            */
+        /* ------------------------------------------------------------------ */
+
+        _bindEvents() {
+            // Close via overlay click
+            if (this.overlay) {
+                this.overlay.addEventListener('click', () => this.close());
+            }
+
+            // Close buttons
+            this.querySelectorAll('[data-action="close"]').forEach((el) => {
+                el.addEventListener('click', () => this.close());
+            });
+
+            // ESC key
+            this._onKeyDown = (e) => {
+                if (e.key === 'Escape' && this.isOpen()) {
+                    this.close();
+                }
+            };
+
+            // Drag-to-dismiss via handle or panel
+            if (this.handle) {
+                this.handle.addEventListener('pointerdown', (e) => this._onPointerDown(e));
+            }
+        }
+
+        _setupOpenTriggers() {
+            const drawerId = this.dataset.drawerId || this.drawer?.id;
+            if (!drawerId) return;
+
+            document.querySelectorAll(`[data-drawer-open="${drawerId}"]`).forEach((trigger) => {
+                trigger.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.open();
+                });
+            });
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        isOpen() {
+            return this.drawer?.classList.contains('rk-drawer--active');
+        }
+
+        open() {
+            if (!this.drawer || this.isOpen()) return;
+
+            this.previousFocus = document.activeElement;
+            this.drawer.classList.add('rk-drawer--active');
+            document.body.style.overflow = 'hidden';
+            document.addEventListener('keydown', this._onKeyDown);
+
+            // Reset any drag transform
+            this.panel.style.transform = '';
+            this.panel.style.transition = '';
+
+            // Trap focus
+            requestAnimationFrame(() => {
+                this.focusableElements = this.panel.querySelectorAll(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                if (this.focusableElements.length > 0) {
+                    this.focusableElements[0].focus();
+                }
+            });
+
+            this.dispatchEvent(
+                new CustomEvent('rk:drawer:open', { bubbles: true, detail: { id: this.drawer.id } })
+            );
+        }
+
+        close() {
+            if (!this.drawer || !this.isOpen()) return;
+
+            this.drawer.classList.remove('rk-drawer--active');
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', this._onKeyDown);
+
+            // Reset drag transform
+            this.panel.style.transform = '';
+            this.panel.style.transition = '';
+
+            if (this.previousFocus) {
+                this.previousFocus.focus();
+                this.previousFocus = null;
+            }
+
+            this.dispatchEvent(
+                new CustomEvent('rk:drawer:close', { bubbles: true, detail: { id: this.drawer.id } })
+            );
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Drag-to-dismiss                                                   */
+        /* ------------------------------------------------------------------ */
+
+        _getSide() {
+            return this.dataset.side || 'bottom';
+        }
+
+        _onPointerDown(e) {
+            if (!this.isOpen()) return;
+            e.preventDefault();
+
+            this._dragging = true;
+            this._startY = e.clientY;
+            this._startX = e.clientX;
+            this._currentTranslate = 0;
+            this.panel.style.transition = 'none';
+
+            document.addEventListener('pointermove', this._onPointerMove);
+            document.addEventListener('pointerup', this._onPointerUp);
+        }
+
+        _onPointerMove(e) {
+            if (!this._dragging) return;
+
+            const side = this._getSide();
+            let delta;
+
+            switch (side) {
+                case 'bottom':
+                    delta = Math.max(0, e.clientY - this._startY);
+                    this.panel.style.transform = `translateY(${delta}px)`;
+                    break;
+                case 'top':
+                    delta = Math.min(0, e.clientY - this._startY);
+                    this.panel.style.transform = `translateY(${delta}px)`;
+                    break;
+                case 'right':
+                    delta = Math.max(0, e.clientX - this._startX);
+                    this.panel.style.transform = `translateX(${delta}px)`;
+                    break;
+                case 'left':
+                    delta = Math.min(0, e.clientX - this._startX);
+                    this.panel.style.transform = `translateX(${delta}px)`;
+                    break;
+            }
+
+            this._currentTranslate = Math.abs(delta);
+        }
+
+        _onPointerUp() {
+            if (!this._dragging) return;
+            this._dragging = false;
+
+            document.removeEventListener('pointermove', this._onPointerMove);
+            document.removeEventListener('pointerup', this._onPointerUp);
+
+            const side = this._getSide();
+            const isVertical = side === 'top' || side === 'bottom';
+            const panelSize = isVertical ? this.panel.offsetHeight : this.panel.offsetWidth;
+
+            this.panel.style.transition = '';
+
+            if (this._currentTranslate > panelSize * this._dismissThreshold) {
+                this.close();
+            } else {
+                // Snap back
+                this.panel.style.transform = '';
+            }
+        }
+    }
+
+    customElements.define('rk-drawer-element', RkDrawerElement);
+}