rook-cli 1.3.2 → 1.3.5

package/rook-framework/assets/rk-scroll-area.js

@@ -0,0 +1,286 @@
+/* ==========================================================================
+   Rook UI Core — Scroll Area Controller
+   Web Component: <rk-scroll-area>
+   ========================================================================== */
+
+if (!customElements.get('rk-scroll-area')) {
+    class RkScrollArea extends HTMLElement {
+        constructor() {
+            super();
+            this.viewport = null;
+            this.trackY = null;
+            this.thumbY = null;
+            this.trackX = null;
+            this.thumbX = null;
+            this.corner = null;
+
+            this._dragging = null; // 'y' | 'x' | null
+            this._dragStart = 0;
+            this._scrollStart = 0;
+            this._hideTimer = null;
+
+            this._onScroll = this._onScroll.bind(this);
+            this._onResize = this._debounce(this._recalculate.bind(this), 100);
+            this._onPointerMove = this._onPointerMove.bind(this);
+            this._onPointerUp = this._onPointerUp.bind(this);
+        }
+
+        connectedCallback() {
+            this.viewport = this.querySelector('.rk-scroll-area__viewport');
+            this.trackY = this.querySelector('.rk-scroll-area__scrollbar--vertical');
+            this.thumbY = this.trackY?.querySelector('.rk-scroll-area__thumb');
+            this.trackX = this.querySelector('.rk-scroll-area__scrollbar--horizontal');
+            this.thumbX = this.trackX?.querySelector('.rk-scroll-area__thumb');
+            this.corner = this.querySelector('.rk-scroll-area__corner');
+
+            if (!this.viewport) return;
+
+            this._bindEvents();
+            this._recalculate();
+
+            // ResizeObserver for dynamic content
+            this._resizeObserver = new ResizeObserver(() => this._recalculate());
+            this._resizeObserver.observe(this.viewport);
+
+            // Also observe the direct content child
+            const content = this.viewport.firstElementChild;
+            if (content) {
+                this._resizeObserver.observe(content);
+            }
+        }
+
+        disconnectedCallback() {
+            this._resizeObserver?.disconnect();
+            window.removeEventListener('resize', this._onResize);
+            document.removeEventListener('pointermove', this._onPointerMove);
+            document.removeEventListener('pointerup', this._onPointerUp);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Events                                                            */
+        /* ------------------------------------------------------------------ */
+
+        _bindEvents() {
+            this.viewport.addEventListener('scroll', this._onScroll, { passive: true });
+            window.addEventListener('resize', this._onResize);
+
+            // Thumb drag — vertical
+            if (this.thumbY) {
+                this.thumbY.addEventListener('pointerdown', (e) => this._onPointerDown(e, 'y'));
+            }
+
+            // Thumb drag — horizontal
+            if (this.thumbX) {
+                this.thumbX.addEventListener('pointerdown', (e) => this._onPointerDown(e, 'x'));
+            }
+
+            // Track click — vertical (jump to position)
+            if (this.trackY) {
+                this.trackY.addEventListener('pointerdown', (e) => {
+                    if (e.target === this.trackY) this._onTrackClick(e, 'y');
+                });
+            }
+
+            // Track click — horizontal (jump to position)
+            if (this.trackX) {
+                this.trackX.addEventListener('pointerdown', (e) => {
+                    if (e.target === this.trackX) this._onTrackClick(e, 'x');
+                });
+            }
+
+            // Visibility mode: hover
+            const visibility = this.dataset.visibility || 'auto';
+            if (visibility === 'hover') {
+                this.addEventListener('pointerenter', () => this._showScrollbars());
+                this.addEventListener('pointerleave', () => this._scheduleHide());
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Scroll handler                                                    */
+        /* ------------------------------------------------------------------ */
+
+        _onScroll() {
+            this._syncThumbs();
+
+            const visibility = this.dataset.visibility || 'auto';
+            if (visibility === 'auto') {
+                this._showScrollbars();
+                this._scheduleHide();
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Thumb calculations                                                */
+        /* ------------------------------------------------------------------ */
+
+        _recalculate() {
+            if (!this.viewport) return;
+
+            const vp = this.viewport;
+            const hasOverflowY = vp.scrollHeight > vp.clientHeight;
+            const hasOverflowX = vp.scrollWidth > vp.clientWidth;
+
+            // Toggle scrollbar visibility based on overflow
+            if (this.trackY) {
+                this.trackY.classList.toggle('rk-scroll-area__scrollbar--hidden', !hasOverflowY);
+            }
+            if (this.trackX) {
+                this.trackX.classList.toggle('rk-scroll-area__scrollbar--hidden', !hasOverflowX);
+            }
+
+            // Corner visibility
+            if (this.corner) {
+                this.corner.classList.toggle('rk-scroll-area__corner--hidden', !(hasOverflowY && hasOverflowX));
+            }
+
+            // Calculate thumb sizes
+            if (this.thumbY && hasOverflowY) {
+                const ratio = vp.clientHeight / vp.scrollHeight;
+                const trackHeight = this.trackY.clientHeight;
+                const thumbHeight = Math.max(ratio * trackHeight, 24);
+                this.thumbY.style.height = `${thumbHeight}px`;
+            }
+
+            if (this.thumbX && hasOverflowX) {
+                const ratio = vp.clientWidth / vp.scrollWidth;
+                const trackWidth = this.trackX.clientWidth;
+                const thumbWidth = Math.max(ratio * trackWidth, 24);
+                this.thumbX.style.width = `${thumbWidth}px`;
+            }
+
+            this._syncThumbs();
+        }
+
+        _syncThumbs() {
+            if (!this.viewport) return;
+            const vp = this.viewport;
+
+            // Vertical thumb position
+            if (this.thumbY && this.trackY) {
+                const scrollableY = vp.scrollHeight - vp.clientHeight;
+                if (scrollableY > 0) {
+                    const ratio = vp.scrollTop / scrollableY;
+                    const trackHeight = this.trackY.clientHeight;
+                    const thumbHeight = this.thumbY.offsetHeight;
+                    const maxOffset = trackHeight - thumbHeight;
+                    this.thumbY.style.transform = `translateY(${ratio * maxOffset}px)`;
+                }
+            }
+
+            // Horizontal thumb position
+            if (this.thumbX && this.trackX) {
+                const scrollableX = vp.scrollWidth - vp.clientWidth;
+                if (scrollableX > 0) {
+                    const ratio = vp.scrollLeft / scrollableX;
+                    const trackWidth = this.trackX.clientWidth;
+                    const thumbWidth = this.thumbX.offsetWidth;
+                    const maxOffset = trackWidth - thumbWidth;
+                    this.thumbX.style.transform = `translateX(${ratio * maxOffset}px)`;
+                }
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Thumb drag                                                        */
+        /* ------------------------------------------------------------------ */
+
+        _onPointerDown(e, axis) {
+            e.preventDefault();
+            e.stopPropagation();
+            this._dragging = axis;
+
+            if (axis === 'y') {
+                this._dragStart = e.clientY;
+                this._scrollStart = this.viewport.scrollTop;
+                this.thumbY.classList.add('rk-scroll-area__thumb--active');
+            } else {
+                this._dragStart = e.clientX;
+                this._scrollStart = this.viewport.scrollLeft;
+                this.thumbX.classList.add('rk-scroll-area__thumb--active');
+            }
+
+            document.addEventListener('pointermove', this._onPointerMove);
+            document.addEventListener('pointerup', this._onPointerUp);
+        }
+
+        _onPointerMove(e) {
+            if (!this._dragging || !this.viewport) return;
+
+            const vp = this.viewport;
+
+            if (this._dragging === 'y') {
+                const delta = e.clientY - this._dragStart;
+                const scrollableY = vp.scrollHeight - vp.clientHeight;
+                const trackHeight = this.trackY.clientHeight;
+                const thumbHeight = this.thumbY.offsetHeight;
+                const scrollRatio = scrollableY / (trackHeight - thumbHeight);
+                vp.scrollTop = this._scrollStart + delta * scrollRatio;
+            } else {
+                const delta = e.clientX - this._dragStart;
+                const scrollableX = vp.scrollWidth - vp.clientWidth;
+                const trackWidth = this.trackX.clientWidth;
+                const thumbWidth = this.thumbX.offsetWidth;
+                const scrollRatio = scrollableX / (trackWidth - thumbWidth);
+                vp.scrollLeft = this._scrollStart + delta * scrollRatio;
+            }
+        }
+
+        _onPointerUp() {
+            this.thumbY?.classList.remove('rk-scroll-area__thumb--active');
+            this.thumbX?.classList.remove('rk-scroll-area__thumb--active');
+            this._dragging = null;
+            document.removeEventListener('pointermove', this._onPointerMove);
+            document.removeEventListener('pointerup', this._onPointerUp);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Track click (jump to position)                                    */
+        /* ------------------------------------------------------------------ */
+
+        _onTrackClick(e, axis) {
+            if (!this.viewport) return;
+            const vp = this.viewport;
+
+            if (axis === 'y') {
+                const trackRect = this.trackY.getBoundingClientRect();
+                const clickRatio = (e.clientY - trackRect.top) / trackRect.height;
+                vp.scrollTop = clickRatio * (vp.scrollHeight - vp.clientHeight);
+            } else {
+                const trackRect = this.trackX.getBoundingClientRect();
+                const clickRatio = (e.clientX - trackRect.left) / trackRect.width;
+                vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Visibility management                                             */
+        /* ------------------------------------------------------------------ */
+
+        _showScrollbars() {
+            clearTimeout(this._hideTimer);
+            this.classList.add('rk-scroll-area--scrolling');
+        }
+
+        _scheduleHide() {
+            clearTimeout(this._hideTimer);
+            this._hideTimer = setTimeout(() => {
+                this.classList.remove('rk-scroll-area--scrolling');
+            }, 1200);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Helpers                                                           */
+        /* ------------------------------------------------------------------ */
+
+        _debounce(fn, delay) {
+            let timer;
+            return (...args) => {
+                clearTimeout(timer);
+                timer = setTimeout(() => fn(...args), delay);
+            };
+        }
+    }
+
+    customElements.define('rk-scroll-area', RkScrollArea);
+}

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

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   Rook UI Core — Sheet Controller
+   Web Component: <rk-sheet-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-sheet-element')) {
+    class RkSheetElement extends HTMLElement {
+        constructor() {
+            super();
+            this.sheet = null;
+            this.overlay = null;
+            this.panel = null;
+            this.previousFocus = null;
+
+            this._onKeyDown = this._onKeyDown.bind(this);
+        }
+
+        connectedCallback() {
+            this.sheet = this.querySelector('.rk-sheet');
+            this.overlay = this.querySelector('.rk-sheet__overlay');
+            this.panel = this.querySelector('.rk-sheet__panel');
+
+            if (!this.sheet || !this.panel) return;
+
+            this._bindEvents();
+            this._setupOpenTriggers();
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Events                                                            */
+        /* ------------------------------------------------------------------ */
+
+        _bindEvents() {
+            // Close buttons
+            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 sheetId = this.dataset.sheetId || this.sheet?.id;
+            if (!sheetId) return;
+
+            document.querySelectorAll(`[data-sheet-open="${sheetId}"]`).forEach((trigger) => {
+                trigger.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    this.open();
+                });
+            });
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        isOpen() {
+            return this.sheet?.classList.contains('rk-sheet--active');
+        }
+
+        open() {
+            if (!this.sheet || this.isOpen()) return;
+
+            this.previousFocus = document.activeElement;
+            this.sheet.classList.add('rk-sheet--active');
+            document.body.style.overflow = 'hidden';
+            document.addEventListener('keydown', this._onKeyDown);
+
+            // Focus first interactive element
+            requestAnimationFrame(() => {
+                const firstFocusable = this.panel.querySelector(
+                    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+                );
+                if (firstFocusable) {
+                    firstFocusable.focus();
+                }
+            });
+
+            this.dispatchEvent(
+                new CustomEvent('rk:sheet:open', {
+                    bubbles: true,
+                    detail: { id: this.sheet.id },
+                })
+            );
+        }
+
+        close() {
+            if (!this.sheet || !this.isOpen()) return;
+
+            this.sheet.classList.remove('rk-sheet--active');
+            document.body.style.overflow = '';
+            document.removeEventListener('keydown', this._onKeyDown);
+
+            if (this.previousFocus) {
+                this.previousFocus.focus();
+                this.previousFocus = null;
+            }
+
+            this.dispatchEvent(
+                new CustomEvent('rk:sheet:close', {
+                    bubbles: true,
+                    detail: { id: this.sheet.id },
+                })
+            );
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Keyboard (ESC + Tab trap)                                         */
+        /* ------------------------------------------------------------------ */
+
+        _onKeyDown(e) {
+            if (!this.isOpen()) return;
+
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.close();
+                return;
+            }
+
+            if (e.key === 'Tab') {
+                this._trapFocus(e);
+            }
+        }
+
+        _trapFocus(e) {
+            const focusable = this.panel?.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) {
+                if (document.activeElement === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+            } else {
+                if (document.activeElement === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        }
+    }
+
+    customElements.define('rk-sheet-element', RkSheetElement);
+}

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

@@ -0,0 +1,179 @@
+/* ==========================================================================
+   Rook UI Core — Tabs Controller
+   Web Component: <rk-tabs-element>
+   ========================================================================== */
+
+if (!customElements.get('rk-tabs-element')) {
+    class RkTabsElement extends HTMLElement {
+        constructor() {
+            super();
+            this.tabs = [];
+            this.panels = [];
+            this.activeTabId = null;
+
+            this._onKeyDown = this._onKeyDown.bind(this);
+            this._onClick = this._onClick.bind(this);
+        }
+
+        connectedCallback() {
+            // Find all tabs and panels within the element
+            this.tabs = Array.from(this.querySelectorAll('[role="tab"]'));
+            this.panels = Array.from(this.querySelectorAll('[role="tabpanel"]'));
+
+            if (this.tabs.length === 0 || this.panels.length === 0) return;
+
+            this._bindEvents();
+            this._setupA11y();
+
+            // Set initial state
+            const defaultId = this.dataset.defaultValue;
+            const tabToActivate = this.tabs.find((tab) => tab.id === defaultId) || this.tabs[0];
+
+            if (tabToActivate) {
+                this.activateTab(tabToActivate.id, false);
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Setup                                                             */
+        /* ------------------------------------------------------------------ */
+
+        _setupA11y() {
+            // Ensure tablist has role
+            const tabList = this.querySelector('.rk-tabs__list');
+            if (tabList && !tabList.hasAttribute('role')) {
+                tabList.setAttribute('role', 'tablist');
+            }
+
+            this.tabs.forEach((tab) => {
+                tab.setAttribute('tabindex', '-1');
+                tab.setAttribute('aria-selected', 'false');
+            });
+
+            this.panels.forEach((panel) => {
+                panel.setAttribute('tabindex', '0');
+                if (!panel.hasAttribute('hidden')) {
+                    panel.setAttribute('hidden', 'true');
+                }
+            });
+        }
+
+        _bindEvents() {
+            const tabList = this.querySelector('.rk-tabs__list');
+            if (tabList) {
+                tabList.addEventListener('keydown', this._onKeyDown);
+                tabList.addEventListener('click', this._onClick);
+            } else {
+                this.tabs.forEach((tab) => {
+                    tab.addEventListener('keydown', this._onKeyDown);
+                    tab.addEventListener('click', this._onClick);
+                });
+            }
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Interactions                                                      */
+        /* ------------------------------------------------------------------ */
+
+        _onClick(e) {
+            const target = e.target.closest('[role="tab"]');
+            if (!target || target.disabled || target.getAttribute('aria-disabled') === 'true') return;
+
+            this.activateTab(target.id, true);
+        }
+
+        _onKeyDown(e) {
+            const target = e.target.closest('[role="tab"]');
+            if (!target) return;
+
+            const currentIndex = this.tabs.indexOf(target);
+            let nextIndex = currentIndex;
+
+            const orientation = this.dataset.orientation || 'horizontal';
+
+            switch (e.key) {
+                case 'ArrowRight':
+                    if (orientation === 'horizontal') nextIndex = currentIndex + 1;
+                    break;
+                case 'ArrowLeft':
+                    if (orientation === 'horizontal') nextIndex = currentIndex - 1;
+                    break;
+                case 'ArrowDown':
+                    if (orientation === 'vertical') nextIndex = currentIndex + 1;
+                    break;
+                case 'ArrowUp':
+                    if (orientation === 'vertical') nextIndex = currentIndex - 1;
+                    break;
+                case 'Home':
+                    nextIndex = 0;
+                    break;
+                case 'End':
+                    nextIndex = this.tabs.length - 1;
+                    break;
+                default:
+                    return; // Let other keys behave normally
+            }
+
+            e.preventDefault(); // Prevent page scroll for arrows
+
+            // Wrap around
+            if (nextIndex >= this.tabs.length) {
+                nextIndex = 0;
+            } else if (nextIndex < 0) {
+                nextIndex = this.tabs.length - 1;
+            }
+
+            const nextTab = this.tabs[nextIndex];
+
+            // Skip disabled tabs
+            if (nextTab.disabled || nextTab.getAttribute('aria-disabled') === 'true') {
+                return; // Simple approach: do not move if next is disabled. (Complex approach: loop until non-disabled).
+            }
+
+            nextTab.focus();
+
+            // Auto-activate on focus in Shadcn/UI default behavior
+            this.activateTab(nextTab.id, true);
+        }
+
+        /* ------------------------------------------------------------------ */
+        /*  Public API                                                        */
+        /* ------------------------------------------------------------------ */
+
+        activateTab(tabId, focus = false) {
+            if (this.activeTabId === tabId) return;
+
+            this.tabs.forEach((tab) => {
+                const isSelected = tab.id === tabId;
+                tab.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+                tab.setAttribute('tabindex', isSelected ? '0' : '-1');
+
+                if (isSelected && focus) {
+                    tab.focus();
+                }
+            });
+
+            this.panels.forEach((panel) => {
+                const controlledBy = panel.getAttribute('aria-labelledby');
+                if (controlledBy === tabId) {
+                    panel.removeAttribute('hidden');
+                    panel.classList.add('rk-tabs__panel--active');
+                } else {
+                    panel.setAttribute('hidden', 'true');
+                    panel.classList.remove('rk-tabs__panel--active');
+                }
+            });
+
+            this.activeTabId = tabId;
+
+            this.dispatchEvent(
+                new CustomEvent('rk:tabs:change', {
+                    bubbles: true,
+                    detail: { activeTabId: tabId },
+                })
+            );
+        }
+    }
+
+    customElements.define('rk-tabs-element', RkTabsElement);
+}