@kodaris/krubble-app-components 1.0.0

package/dist/scaffold.js

@@ -0,0 +1,1853 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { KRContextMenu, KRDialog } from '@kodaris/krubble-components';
+import { KRClient } from '@krubble/data';
+import { KRNavItemEdit } from './scaffold/nav-item-edit.js';
+/**
+ * Application shell component with nav drawer and main content area.
+ *
+ * ## Features
+ * - Collapsible navigation drawer with hierarchical items (groups and items)
+ * - User profile display in footer with customization menu
+ * - Edit mode for customizing navigation (rename, reorder, hide items, add custom items)
+ * - Drag and drop reordering in edit mode
+ * - Persistence of customizations via preference API (global/organization level)
+ *
+ * ## Nav Customization
+ * Users can customize the navigation by clicking their profile and selecting
+ * "Customize Navigation". This enters edit mode where users can:
+ * - Right-click items to edit label, icon, or visibility
+ * - Right-click to add new items above/below existing items
+ * - Drag and drop to reorder items or move them between groups
+ *
+ * Customizations are stored globally and apply to all users.
+ *
+ * ## Preference Storage
+ * Preferences are stored as JSON with the following structure:
+ * ```json
+ * {
+ *   "nav": {
+ *     "itemId": { "label": "Custom Label", "icon": "...", "active": true, "order": 0 },
+ *     "custom-123": { "type": "item", "label": "New Item", "url": "/path", ... }
+ *   }
+ * }
+ * ```
+ *
+ * The `nav` object is a delta - it only contains overrides for existing items
+ * or definitions for custom items (prefixed with "custom-").
+ *
+ * ## API Endpoints Used
+ * - GET `/api/system/preference/json/scaffold?global=true` - load preferences
+ * - POST `/api/system/preference/json/scaffold?global=true` - create new preference
+ * - PUT `/api/system/preference/json/scaffold/{uuid}?global=true` - update existing preference
+ *
+ * @slot - The main content
+ *
+ * @property {string} logo - URL for the logo image
+ * @property {string} title - Title text to display instead of logo
+ * @property {'light'|'dark'} scheme - Color scheme: 'light' (default) or 'dark'
+ * @property {KRNavItem[]} nav - Navigation items as JSON array
+ * @property {KRUser} user - User profile data
+ *
+ *
+ * TODO
+ * - Don't hardcode breadcrumbs
+ * - Look at renderNormalFooter and renderEditFooter and see if that is what we want to do
+ */
+let KRScaffold = class KRScaffold extends LitElement {
+    constructor() {
+        super();
+        /**
+         * HTTP client for API calls
+         */
+        this.http = KRClient.getInstance();
+        /**
+         * Default icon for nav items without an icon (shown at top level)
+         */
+        this.defaultNavItemIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="10"/></svg>';
+        this.navItemsExpanded = new Set();
+        this.navQuery = '';
+        this.activeNavItemId = null;
+        this.isNavScrolled = false;
+        this.isNavOpened = true;
+        this.isEditing = false;
+        this.isUserMenuOpen = false;
+        this.pref = { nav: {} };
+        this.draggedNavItemId = null;
+        this.navItemDropTargetId = null;
+        this.navItemDropPosition = 'above';
+        this.pendingRequests = 0;
+        this.originalFetch = null;
+        this.originalXhrOpen = null;
+        this.navItemDragPreview = null;
+        this.navItemDragStartY = 0;
+        this.isNavItemDragging = false;
+        this.navItemDragExpandTimeout = null;
+        this.navInitialized = false;
+        this.logo = '';
+        this.title = '';
+        this.scheme = 'light';
+        this.nav = [];
+        this.navIconsDisplayed = false;
+        this.navExpanded = false;
+        this.user = null;
+        /**
+         * Whether to show the subbar with menu toggle
+         */
+        this.subbar = false;
+        /**
+         * Breadcrumbs to display in the subbar
+         */
+        this.breadcrumbs = [];
+        this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+        this.boundHandleMouseUp = this.handleMouseUp.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadPref();
+        this.installFetchInterceptor();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('nav') && this.nav.length > 0) {
+            this.updateActiveNavItem();
+            if (this.navExpanded && !this.navInitialized) {
+                this.navInitialized = true;
+                this.getComputedNav()
+                    .filter(item => item.type === 'group')
+                    .forEach(group => this.navItemsExpanded.add(group.id));
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.uninstallFetchInterceptor();
+    }
+    /**
+     * Installs global interceptors for fetch and XMLHttpRequest to track pending HTTP requests.
+     * Updates `pendingRequests` state when requests start/complete.
+     */
+    installFetchInterceptor() {
+        if (this.originalFetch)
+            return;
+        const scaffold = this;
+        // Intercept fetch
+        this.originalFetch = window.fetch.bind(window);
+        const originalFetch = this.originalFetch; // Capture in local scope to avoid null reference after uninstall
+        window.fetch = function (...args) {
+            scaffold.pendingRequests++;
+            return originalFetch(...args).finally(() => {
+                scaffold.pendingRequests--;
+            });
+        };
+        // Intercept XMLHttpRequest
+        this.originalXhrOpen = XMLHttpRequest.prototype.open;
+        const originalXhrOpen = this.originalXhrOpen; // Capture in local scope to avoid null reference after uninstall
+        XMLHttpRequest.prototype.open = function (method, url, async = true, username, password) {
+            scaffold.pendingRequests++;
+            this.addEventListener('loadend', () => {
+                scaffold.pendingRequests--;
+            }, { once: true });
+            return originalXhrOpen.call(this, method, url, async, username, password);
+        };
+    }
+    /**
+     * Restores the original fetch and XMLHttpRequest functions.
+     */
+    uninstallFetchInterceptor() {
+        if (this.originalFetch) {
+            window.fetch = this.originalFetch;
+            this.originalFetch = null;
+        }
+        if (this.originalXhrOpen) {
+            XMLHttpRequest.prototype.open = this.originalXhrOpen;
+            this.originalXhrOpen = null;
+        }
+    }
+    // =========================================================================
+    // Navigation Data
+    // =========================================================================
+    /**
+     * Returns the computed navigation as a flat array with preferences applied.
+     *
+     * Transforms the hierarchical `nav` property into a flat list where each item
+     * has a `parentId` reference instead of nested `children`. Merges user
+     * preference overrides (label, icon, url, active, order, parentId) and
+     * includes any custom items added via the edit dialog.
+     *
+     * @returns Flat array of nav items with preferences applied
+     */
+    getComputedNav() {
+        const result = [];
+        this.nav.forEach((item, index) => {
+            const override = this.pref.nav[item.id];
+            result.push({
+                ...item,
+                ...override,
+                order: override?.order ?? item.order ?? index,
+                parentId: override?.parentId ?? null,
+            });
+            // Add children if group
+            if (item.type === 'group' && item.children) {
+                item.children.forEach((child, childIndex) => {
+                    const childOverride = this.pref.nav[child.id];
+                    result.push({
+                        ...child,
+                        ...childOverride,
+                        order: childOverride?.order ?? child.order ?? childIndex,
+                        parentId: childOverride?.parentId !== undefined ? childOverride.parentId : item.id,
+                    });
+                });
+            }
+        });
+        // Add custom items from pref
+        Object.entries(this.pref.nav).forEach(([id, item]) => {
+            if (id.startsWith('custom') && item.type && item.label) {
+                result.push({
+                    id,
+                    type: item.type,
+                    label: item.label,
+                    icon: item.icon,
+                    url: item.url,
+                    active: item.active,
+                    order: item.order ?? result.length,
+                    parentId: item.parentId ?? null,
+                });
+            }
+        });
+        return result;
+    }
+    /**
+     * Returns nav items for a given parent, filtered and sorted for rendering.
+     *
+     * Filters the computed nav to items matching the parentId, sorts by order,
+     * hides inactive items in normal mode, and applies the search query filter.
+     * Groups are shown if their label matches or if they have matching children.
+     *
+     * @param parentId - The parent ID to filter by (null for top-level items)
+     * @returns Filtered and sorted nav items ready for rendering
+     */
+    getNavItemChildren(parentId) {
+        let items = this.getComputedNav()
+            .filter(item => item.parentId === parentId)
+            .sort((a, b) => a.order - b.order);
+        // In normal mode, filter out hidden items
+        if (!this.isEditing) {
+            items = items.filter(item => item.active !== false);
+        }
+        // Apply search filter
+        if (this.navQuery) {
+            const query = this.navQuery.toLowerCase();
+            const allItems = this.getComputedNav();
+            items = items.filter(item => {
+                if (item.type === 'group') {
+                    // Show group if its label matches OR if it has matching children
+                    return item.label.toLowerCase().includes(query) || allItems.some(child => child.parentId === item.id &&
+                        child.active !== false &&
+                        child.label.toLowerCase().includes(query));
+                }
+                // Show item if its label matches
+                return item.label.toLowerCase().includes(query);
+            });
+        }
+        return items;
+    }
+    // =========================================================================
+    // Navigation Search
+    // =========================================================================
+    /**
+     * Handles search input changes for filtering nav items.
+     *
+     * When a search query is entered, automatically expands any groups that
+     * contain matching children so users can see the results. When the search
+     * is cleared, collapses all groups back to their default state.
+     *
+     * @param e - The input event from the search field
+     */
+    handleNavQueryChange(e) {
+        this.navQuery = e.target.value;
+        // Expand all groups when searching so matching children are visible
+        // (groups without matching children won't be rendered anyway)
+        if (this.navQuery) {
+            this.getComputedNav().forEach(item => {
+                if (item.type === 'group') {
+                    this.navItemsExpanded.add(item.id);
+                }
+            });
+        }
+        else {
+            // Collapse all when search is cleared
+            this.navItemsExpanded.clear();
+        }
+    }
+    /**
+     * Clears the search query.
+     */
+    handleNavQueryClear() {
+        this.navQuery = '';
+        this.navItemsExpanded.clear();
+    }
+    // =========================================================================
+    // Navigation Interaction
+    // =========================================================================
+    handleMenuClick() {
+        this.isNavOpened = !this.isNavOpened;
+    }
+    /**
+     * Handles scroll on nav content to show/hide header shadow.
+     */
+    handleNavScroll(e) {
+        this.isNavScrolled = e.target.scrollTop > 0;
+    }
+    /**
+     * Toggles the expanded/collapsed state of a nav group with animation.
+     * Uses the Web Animations API to animate height transitions.
+     * When collapsing, the `nav-group--expanded` class is removed after animation completes.
+     * When expanding, the class is added immediately before animation starts.
+     *
+     * @param itemId - The unique identifier of the nav group to toggle
+     */
+    toggleNavItem(itemId) {
+        const navItem = this.shadowRoot?.querySelector(`.nav-item[data-id="${itemId}"]`);
+        const groupEl = navItem?.nextElementSibling;
+        if (!groupEl)
+            return;
+        if (this.navItemsExpanded.has(itemId)) {
+            this.navItemsExpanded.delete(itemId);
+            groupEl.animate([
+                { height: `${groupEl.scrollHeight}px` },
+                { height: '0px' }
+            ], { duration: 300, easing: 'ease-in-out' }).onfinish = () => {
+                groupEl.classList.remove('nav-group--expanded');
+            };
+        }
+        else {
+            this.navItemsExpanded.add(itemId);
+            groupEl.classList.add('nav-group--expanded');
+            groupEl.animate([
+                { height: '0px' },
+                { height: `${groupEl.scrollHeight}px` }
+            ], { duration: 300, easing: 'ease-in-out' });
+        }
+        this.requestUpdate();
+    }
+    /**
+     * Handles click events on navigation items.
+     *
+     * For groups, toggles the expanded/collapsed state.
+     * For items, dispatches a cancelable `nav-item-click` custom event.
+     *
+     * If a listener calls `preventDefault()` on the custom event, native browser
+     * navigation is prevented. Otherwise, the default `<a href>` navigation
+     * proceeds normally.
+     *
+     * The `@krubble/angular` package provides `KRScaffoldDirective` which
+     * automatically listens for this event and handles navigation using
+     * Angular's router. Import `KrubbleModule` in your Angular app to enable
+     * SPA navigation without page reloads.
+     *
+     * @param e - The original click event
+     * @param item - The nav item that was clicked
+     */
+    handleNavItemClick(e, item) {
+        if (item.type === 'group') {
+            this.toggleNavItem(item.id);
+        }
+        else {
+            const navEvent = new CustomEvent('nav-item-click', {
+                detail: { item },
+                bubbles: true,
+                composed: true,
+                cancelable: true,
+            });
+            this.dispatchEvent(navEvent);
+            // If a listener called preventDefault(), prevent the native navigation
+            if (navEvent.defaultPrevented) {
+                e.preventDefault();
+            }
+        }
+    }
+    /**
+     * Updates the active nav item highlight based on the current URL.
+     *
+     * Compares the first path segment of `window.location.pathname` with each
+     * nav item's URL to find a match. When found, highlights that item and
+     * expands its parent group if nested.
+     *
+     * Called automatically by `KRScaffoldDirective` on Angular route changes.
+     */
+    updateActiveNavItem() {
+        const currentPath = window.location.pathname;
+        const allItems = this.getComputedNav().filter(item => item.type === 'item' && item.url);
+        // Find the best match - prefer longer/more specific URL matches
+        let activeItem = null;
+        let longestMatch = 0;
+        for (const item of allItems) {
+            const url = item.url; // We filtered for items with url above
+            if (currentPath.startsWith(url) && url.length > longestMatch) {
+                activeItem = item;
+                longestMatch = url.length;
+            }
+        }
+        if (activeItem) {
+            this.activeNavItemId = activeItem.id;
+            if (activeItem.parentId) {
+                this.navItemsExpanded.add(activeItem.parentId);
+            }
+        }
+        else {
+            this.activeNavItemId = null;
+        }
+    }
+    // =========================================================================
+    // Navigation Customization
+    // =========================================================================
+    startEditing() {
+        this.isEditing = true;
+    }
+    cancelEditing() {
+        this.isEditing = false;
+        // Reload to revert changes
+        this.loadPref();
+    }
+    resetPref() {
+        this.pref.nav = {};
+    }
+    savePref() {
+        const url = this.pref.uuid
+            ? `/api/system/preference/json/scaffold/${this.pref.uuid}?global=true`
+            : `/api/system/preference/json/scaffold?global=true`;
+        this.http.fetch({
+            url,
+            method: this.pref.uuid ? 'PUT' : 'POST',
+            body: JSON.stringify({ nav: this.pref.nav }),
+        })
+            .then((response) => {
+            this.pref = response.data;
+            this.isEditing = false;
+        })
+            .catch((error) => {
+            console.error('Failed to save nav customizations:', error);
+        });
+    }
+    loadPref() {
+        this.http.fetch({
+            url: '/api/system/preference/json/scaffold?global=true',
+            method: 'GET',
+        })
+            .then((response) => {
+            const pref = response?.data?.[0];
+            if (pref) {
+                this.pref = pref;
+            }
+        })
+            .catch(() => {
+            // No preferences saved yet
+        });
+    }
+    handleNavItemContextMenu(e, item) {
+        if (!this.isEditing)
+            return;
+        e.preventDefault();
+        KRContextMenu.open({
+            x: e.clientX,
+            y: e.clientY,
+            items: [
+                { id: 'edit', label: 'Edit Item' },
+                { id: 'divider-1', label: '', divider: true },
+                { id: 'add-above', label: 'Add Item Above' },
+                { id: 'add-below', label: 'Add Item Below' },
+            ],
+        }).then((result) => {
+            if (!result)
+                return;
+            switch (result.id) {
+                case 'edit':
+                    this.openNavItemEdit(item);
+                    break;
+                case 'add-above':
+                    this.addNavItem(item, 'above');
+                    break;
+                case 'add-below':
+                    this.addNavItem(item, 'below');
+                    break;
+            }
+        });
+    }
+    /**
+     * Opens the nav item edit dialog for customizing an item's properties.
+     *
+     * Opens `KRNavItemEdit` dialog pre-populated with the item's current values.
+     * When the user saves, merges the result into the nav delta to persist
+     * customizations like label, icon, URL, and visibility.
+     *
+     * @param item - The nav item to edit
+     */
+    openNavItemEdit(item) {
+        KRDialog.open(KRNavItemEdit, { data: item }).afterClosed().then((res) => {
+            const result = res;
+            if (!result)
+                return;
+            if (!this.pref.nav[item.id]) {
+                this.pref.nav[item.id] = {};
+            }
+            this.pref.nav[item.id] = {
+                ...this.pref.nav[item.id],
+                ...result
+            };
+            this.requestUpdate();
+        });
+    }
+    /**
+     * Adds a new custom nav item relative to an existing item.
+     *
+     * Creates a placeholder item in the nav delta, shifts existing siblings
+     * to make room, then opens the edit dialog so the user can configure
+     * the new item's label, icon, and URL.
+     *
+     * @param targetItem - The existing item to position relative to
+     * @param position - Whether to insert 'above' or 'below' the target item
+     */
+    addNavItem(targetItem, position) {
+        const customId = `custom-${Date.now()}`;
+        const siblings = this.getComputedNav()
+            .filter(i => i.parentId === targetItem.parentId)
+            .sort((a, b) => a.order - b.order);
+        const targetIndex = siblings.findIndex(i => i.id === targetItem.id);
+        const newOrder = position === 'above' ? targetIndex : targetIndex + 1;
+        // Shift existing items to make room for the new item
+        siblings.forEach((sibling, index) => {
+            if (index >= newOrder) {
+                if (!this.pref.nav[sibling.id]) {
+                    this.pref.nav[sibling.id] = {};
+                }
+                this.pref.nav[sibling.id].order = index + 1;
+            }
+        });
+        // Add the new item and open edit dialog
+        const newItem = {
+            id: customId,
+            type: 'item',
+            label: 'New Item',
+            order: newOrder,
+            parentId: targetItem.parentId,
+            active: true,
+        };
+        this.pref.nav[customId] = newItem;
+        this.requestUpdate();
+        this.openNavItemEdit(newItem);
+    }
+    // =========================================================================
+    // Navigation Drag & Drop
+    // =========================================================================
+    /**
+     * Initiates a potential drag operation when mouse is pressed on a nav item.
+     *
+     * Only active in edit mode. Records the starting position and sets up
+     * document-level listeners for mouse move and mouse up events. The actual
+     * drag doesn't start until the mouse moves more than 5 pixels.
+     *
+     * @param e - The mouse event
+     * @param item - The nav item being pressed
+     */
+    handleNavItemMouseDown(e, item) {
+        if (!this.isEditing)
+            return;
+        e.preventDefault();
+        this.draggedNavItemId = item.id;
+        this.navItemDragStartY = e.clientY;
+        this.isNavItemDragging = false;
+        document.addEventListener('mousemove', this.boundHandleMouseMove);
+        document.addEventListener('mouseup', this.boundHandleMouseUp);
+    }
+    /**
+     * Handles mouse movement during a nav item drag operation.
+     *
+     * Initiates dragging after the mouse moves more than 5 pixels (to distinguish
+     * from clicks), creates a floating preview element that follows the cursor,
+     * and updates the drop target indicator based on mouse position.
+     *
+     * @param e - The mouse event
+     */
+    handleMouseMove(e) {
+        if (!this.draggedNavItemId)
+            return;
+        // Start dragging after moving a few pixels (to distinguish from clicks)
+        if (!this.isNavItemDragging && Math.abs(e.clientY - this.navItemDragStartY) > 5) {
+            this.isNavItemDragging = true;
+            this.classList.add('kr-scaffold--dragging');
+            // Create drag preview
+            const draggedItem = this.getComputedNav().find(i => i.id === this.draggedNavItemId);
+            if (draggedItem) {
+                this.navItemDragPreview = document.createElement('div');
+                this.navItemDragPreview.className = 'nav-item-drag-preview';
+                this.navItemDragPreview.textContent = draggedItem.label;
+                this.navItemDragPreview.style.left = `${e.clientX + 10}px`;
+                this.navItemDragPreview.style.top = `${e.clientY - 20}px`;
+                this.shadowRoot?.appendChild(this.navItemDragPreview);
+            }
+        }
+        if (!this.isNavItemDragging)
+            return;
+        // Update preview position
+        if (this.navItemDragPreview) {
+            this.navItemDragPreview.style.left = `${e.clientX + 10}px`;
+            this.navItemDragPreview.style.top = `${e.clientY - 20}px`;
+        }
+        // Find drop target based on mouse position
+        this.updateNavItemDropTarget(e);
+    }
+    /**
+     * Handles the end of a nav item drag operation.
+     *
+     * Removes document-level mouse listeners, executes the drop if there's a valid
+     * target, and cleans up all drag-related state.
+     */
+    handleMouseUp() {
+        document.removeEventListener('mousemove', this.boundHandleMouseMove);
+        document.removeEventListener('mouseup', this.boundHandleMouseUp);
+        if (this.isNavItemDragging && this.navItemDropTargetId) {
+            this.executeNavItemDrop();
+        }
+        // Reset all drag state
+        this.draggedNavItemId = null;
+        this.navItemDropTargetId = null;
+        this.isNavItemDragging = false;
+        this.classList.remove('kr-scaffold--dragging');
+        if (this.navItemDragPreview) {
+            this.navItemDragPreview.remove();
+            this.navItemDragPreview = null;
+        }
+        this.clearNavItemDragExpandTimeout();
+        this.requestUpdate();
+    }
+    /**
+     * Determines where a dragged nav item would be dropped based on mouse position.
+     *
+     * Loops through all nav items and checks if the mouse is hovering over one.
+     * For groups, the item is divided into thirds (above/center/below) where
+     * "center" means drop into the group. For regular items, it's halves (above/below).
+     *
+     * Also handles auto-expanding collapsed groups when hovering over their center,
+     * and validates drops (e.g., prevents dropping a group into another group).
+     *
+     * Updates `navItemDropTargetId` and `navItemDropPosition` state which are used to render
+     * visual drop indicators in the UI.
+     *
+     * @param e - The mouse event from dragging
+     */
+    updateNavItemDropTarget(e) {
+        // Get all nav items in shadow DOM
+        const navItems = this.shadowRoot?.querySelectorAll('.nav-item[data-id]');
+        if (!navItems)
+            return;
+        let foundTarget = false;
+        navItems.forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            const itemId = el.getAttribute('data-id');
+            if (!itemId || itemId === this.draggedNavItemId)
+                return;
+            // Skip if mouse is outside this element
+            if (e.clientX < rect.left || e.clientX > rect.right ||
+                e.clientY < rect.top || e.clientY > rect.bottom) {
+                return;
+            }
+            const item = this.getComputedNav().find(i => i.id === itemId);
+            if (!item) {
+                return;
+            }
+            const y = e.clientY - rect.top;
+            let position;
+            // Determine drop position based on mouse Y position within the item.
+            // Groups are divided into thirds: top=above, middle=center (drop into), bottom=below.
+            // Regular items are divided in half: top=above, bottom=below.
+            if (item.type === 'group') {
+                if (y < rect.height / 3) {
+                    // Top third - drop above the group
+                    position = 'above';
+                    this.clearNavItemDragExpandTimeout();
+                }
+                else if (y > (rect.height * 2) / 3) {
+                    // Bottom third - drop below the group
+                    position = 'below';
+                    this.clearNavItemDragExpandTimeout();
+                }
+                else {
+                    // Middle third - drop into the group (as a child)
+                    position = 'center';
+                    // Auto-expand collapsed groups after a delay
+                    if (!this.navItemsExpanded.has(item.id) && !this.navItemDragExpandTimeout) {
+                        this.expandNavGroupOnDrag(item.id);
+                    }
+                }
+            }
+            else {
+                // Regular items only support above/below, not center
+                position = y < rect.height / 2 ? 'above' : 'below';
+                this.clearNavItemDragExpandTimeout();
+            }
+            // Determine what the new parent would be
+            const newParentId = position === 'center' ? item.id : item.parentId;
+            const draggedItem = this.getComputedNav().find(i => i.id === this.draggedNavItemId);
+            // Don't show drop indicator if invalid drop:
+            // 1. Can't drop an item into itself (newParentId === draggedNavItemId)
+            // 2. Groups can only exist at the top level, so prevent dropping a group into another group (newParentId !== null means it would be nested)
+            if (newParentId === this.draggedNavItemId || (draggedItem?.type === 'group' && newParentId !== null)) {
+                this.navItemDropTargetId = null;
+                this.clearNavItemDragExpandTimeout();
+                return;
+            }
+            // Valid drop target found - store the target item and position (above/below/center)
+            // so the UI can render the drop indicator in the correct location
+            this.navItemDropTargetId = item.id;
+            this.navItemDropPosition = position;
+            foundTarget = true;
+        });
+        // Mouse is not over any valid nav item - clear the drop indicator
+        // (e.g., user dragged outside the nav area or over empty space)
+        if (!foundTarget) {
+            this.navItemDropTargetId = null;
+            this.clearNavItemDragExpandTimeout();
+        }
+        this.requestUpdate();
+    }
+    /**
+     * Cancels the pending auto-expand timeout for nav groups during drag.
+     * Called when the user moves away from a group's center or stops dragging.
+     */
+    clearNavItemDragExpandTimeout() {
+        if (this.navItemDragExpandTimeout) {
+            clearTimeout(this.navItemDragExpandTimeout);
+            this.navItemDragExpandTimeout = null;
+        }
+    }
+    /**
+     * Auto-expands a collapsed nav group after a delay while dragging over it.
+     *
+     * Uses a 500ms timeout to prevent groups from expanding too eagerly when the
+     * user is just passing over them. Only expands if the user is still hovering
+     * over the group's center when the timeout fires.
+     *
+     * @param itemId - The ID of the group to expand
+     */
+    expandNavGroupOnDrag(itemId) {
+        this.navItemDragExpandTimeout = window.setTimeout(() => {
+            if (this.navItemDropTargetId === itemId && this.navItemDropPosition === 'center') {
+                this.navItemsExpanded.add(itemId);
+                this.requestUpdate();
+            }
+            this.navItemDragExpandTimeout = null;
+        }, 500);
+    }
+    /**
+     * Executes the drop operation after a nav item drag completes.
+     *
+     * Calculates the new position and parent for the dragged item based on
+     * the drop target and position (above/below/center). Updates the navDelta
+     * with new order values for the dragged item and shifts siblings as needed.
+     */
+    executeNavItemDrop() {
+        if (!this.draggedNavItemId || !this.navItemDropTargetId)
+            return;
+        const allItems = this.getComputedNav();
+        const draggedItem = allItems.find(i => i.id === this.draggedNavItemId);
+        const targetItem = allItems.find(i => i.id === this.navItemDropTargetId);
+        if (!draggedItem || !targetItem)
+            return;
+        // Determine the new parentId for the dragged item
+        let newParentId;
+        if (this.navItemDropPosition === 'center' && targetItem.type === 'group') {
+            if (targetItem.id === this.draggedNavItemId) {
+                return;
+            }
+            newParentId = targetItem.id;
+        }
+        else {
+            newParentId = targetItem.parentId;
+        }
+        if (newParentId === this.draggedNavItemId)
+            return;
+        // Get siblings in the destination parent
+        const siblings = allItems
+            .filter(i => i.parentId === newParentId && i.id !== this.draggedNavItemId)
+            .sort((a, b) => a.order - b.order);
+        const navDelta = this.pref.nav;
+        // Calculate the new order
+        let newOrder;
+        if (this.navItemDropPosition === 'center') {
+            // Dropping into a group - place at the end of its children
+            if (siblings.length > 0) {
+                newOrder = Math.max(...siblings.map(s => s.order)) + 1;
+            }
+            else {
+                newOrder = 0;
+            }
+        }
+        else {
+            // Find where the target item is in the sorted siblings list
+            const targetIndex = siblings.findIndex(i => i.id === targetItem.id);
+            // Determine insert position based on drop position (above/below target)
+            if (targetIndex === -1) {
+                newOrder = 0;
+            }
+            else if (this.navItemDropPosition === 'above') {
+                newOrder = targetIndex;
+            }
+            else {
+                newOrder = targetIndex + 1;
+            }
+            // Shift existing siblings to make room for the dropped item.
+            // Items at or after the insert position get their order bumped up by 1.
+            siblings.forEach((sibling, index) => {
+                if (!navDelta[sibling.id]) {
+                    navDelta[sibling.id] = {};
+                }
+                if (index >= newOrder) {
+                    navDelta[sibling.id].order = index + 1;
+                }
+                else {
+                    navDelta[sibling.id].order = index;
+                }
+            });
+        }
+        // Update the dragged item's position and parent in the delta
+        if (!navDelta[this.draggedNavItemId]) {
+            navDelta[this.draggedNavItemId] = {};
+        }
+        navDelta[this.draggedNavItemId].order = newOrder;
+        navDelta[this.draggedNavItemId].parentId = newParentId;
+        // Persist changes and trigger re-render
+        this.pref.nav = navDelta;
+        this.requestUpdate();
+    }
+    // =========================================================================
+    // User Menu
+    // =========================================================================
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+    }
+    closeUserMenu() {
+        this.isUserMenuOpen = false;
+    }
+    handleCustomize() {
+        this.closeUserMenu();
+        this.startEditing();
+    }
+    // =========================================================================
+    // Rendering
+    // =========================================================================
+    renderNormalFooter() {
+        if (!this.user)
+            return nothing;
+        const initials = this.user.name
+            .split(' ')
+            .map((part) => part[0])
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+        // todo - use a reusable menu component
+        return html `
+      <div class="user-menu-container">
+        ${this.isUserMenuOpen ? html `
+          <div class="user-menu">
+            <button class="user-menu__item" @click=${this.handleCustomize}>
+              Customize Navigation
+            </button>
+          </div>
+        ` : nothing}
+        <div class="user" @click=${this.toggleUserMenu}>
+          <div class="user__avatar">
+            ${this.user.avatar
+            ? html `<img src=${this.user.avatar} alt=${this.user.name} />`
+            : initials}
+          </div>
+          <div class="user__info">
+            <div class="user__name">${this.user.name}</div>
+            ${this.user.email ? html `<div class="user__email">${this.user.email}</div>` : nothing}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    // todo - review
+    renderEditFooter() {
+        return html `
+      <div class="edit-actions">
+        <button class="edit-actions__btn edit-actions__btn--primary" @click=${this.savePref}>
+          Save
+        </button>
+        <div class="edit-actions__secondary">
+          <button class="edit-actions__btn" @click=${this.resetPref}>
+            Reset
+          </button>
+          <button class="edit-actions__btn" @click=${this.cancelEditing}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Renders a navigation item as either a group or a link.
+     *
+     * Groups render as expandable `<button>` elements with a chevron indicator and
+     * nested children. Items render as `<a>` anchor links with href navigation.
+     *
+     * Both types support drag-and-drop reordering in edit mode, context menus for
+     * customization, and visual indicators for active/hidden/drop-target states.
+     *
+     * Icons use SVG strings and fall back to `defaultNavItemIcon` when not provided.
+     * Icons are only rendered for top-level items, not for children nested within groups.
+     *
+     * @param item - The flat nav item data to render
+     * @param isChild - Whether this item is nested within a group (affects icon rendering)
+     * @returns Lit HTML template for the nav item
+     */
+    renderNavItem(item, isChild = false) {
+        if (item.type === 'section') {
+            return html `
+        <div class="nav-section">${item.label}</div>
+      `;
+        }
+        if (item.type === 'group') {
+            const children = this.getNavItemChildren(item.id);
+            return html `
+        <button
+          class=${classMap({
+                'nav-item': true,
+                'nav-item--expanded': this.navItemsExpanded.has(item.id),
+                'nav-item--hidden': this.isEditing && item.active === false,
+                'nav-item--drop-above': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'above',
+                'nav-item--drop-below': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'below',
+                'nav-item--drop-center': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'center',
+            })}
+          data-id="${item.id}"
+          @mousedown=${(e) => this.handleNavItemMouseDown(e, item)}
+          @click=${(e) => this.handleNavItemClick(e, item)}
+          @contextmenu=${(e) => this.handleNavItemContextMenu(e, item)}
+        >
+          ${this.navIconsDisplayed ? html `<span class="nav-item__icon">${unsafeHTML(item.icon || this.defaultNavItemIcon)}</span>` : nothing}
+          <span class="nav-item__label">${item.label}</span>
+          <svg
+            class="nav-item__chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M6 9l6 6 6-6" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </button>
+        <div class=${classMap({
+                'nav-group': true,
+                'nav-group--expanded': this.navItemsExpanded.has(item.id),
+            })}>
+          ${children.map((child) => this.renderNavItem(child, true))}
+        </div>
+      `;
+        }
+        return html `
+      <a
+        class=${classMap({
+            'nav-item': true,
+            'nav-item--active': this.activeNavItemId === item.id,
+            'nav-item--hidden': this.isEditing && item.active === false,
+            'nav-item--drop-above': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'above',
+            'nav-item--drop-below': this.navItemDropTargetId === item.id && this.navItemDropPosition === 'below',
+        })}
+        data-id="${item.id}"
+        href=${item.url || '#'}
+        @mousedown=${(e) => this.handleNavItemMouseDown(e, item)}
+        @click=${(e) => this.handleNavItemClick(e, item)}
+        @contextmenu=${(e) => this.handleNavItemContextMenu(e, item)}
+      >
+        ${this.navIconsDisplayed && !isChild ? html `<span class="nav-item__icon">${unsafeHTML(item.icon || this.defaultNavItemIcon)}</span>` : nothing}
+        <span class="nav-item__label">${item.label}</span>
+      </a>
+    `;
+    }
+    // todo - don't hardcode breadcrumbs
+    render() {
+        const topLevelItems = this.getNavItemChildren(null);
+        // Use unfiltered count to determine if search should show (so it doesn't disappear while typing)
+        const totalTopLevelItems = this.getComputedNav().filter(item => item.parentId === null).length;
+        return html `
+      <div class=${classMap({
+            'progress': true,
+            'progress--loading': this.pendingRequests > 0,
+        })}>
+        <div class="progress__track"></div>
+        <div class="progress__bar progress__bar--primary">
+          <span class="progress__bar-inner"></span>
+        </div>
+        <div class="progress__bar progress__bar--secondary">
+          <span class="progress__bar-inner"></span>
+        </div>
+      </div>
+      
+      ${this.subbar ? html `
+        <kr-subbar menu .breadcrumbs=${this.breadcrumbs} @menu-click=${this.handleMenuClick}>
+          <slot name="subbar"></slot>
+        </kr-subbar>
+      ` : nothing}
+
+      <div class="wrapper">
+        <nav class=${classMap({
+            'nav': true,
+            'nav--scrolled': this.isNavScrolled,
+            'nav--opened': !this.subbar || this.isNavOpened,
+        })}>
+          <div class="nav-header">
+            ${this.title
+            ? html `<span class="nav-title">${this.title}</span>`
+            : this.logo
+                ? html `<img class="nav-logo" src=${this.logo} alt="Logo" />`
+                : nothing}
+          </div>
+          <div class="nav-content" @scroll=${this.handleNavScroll}>
+            ${totalTopLevelItems > 20 ? html `
+              <div class="nav-search">
+                <div class="nav-search__wrapper">
+                  <span class="nav-search__icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                    </svg>
+                  </span>
+                  <input
+                    class="nav-search__input"
+                    type="text"
+                    placeholder="Search..."
+                    .value=${this.navQuery}
+                    @input=${this.handleNavQueryChange}
+                  />
+                  ${this.navQuery ? html `
+                    <button class="nav-search__clear" @click=${this.handleNavQueryClear}>
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                      </svg>
+                    </button>
+                  ` : nothing}
+                </div>
+              </div>
+            ` : nothing}
+            <div class="nav-items">
+              ${topLevelItems.map((item) => this.renderNavItem(item))}
+            </div>
+          </div>
+          <!-- <div class="nav-footer">
+            ${this.isEditing ? this.renderEditFooter() : this.renderNormalFooter()}
+          </div> -->
+        </nav>
+
+        <main class="main">
+          <slot></slot>
+        </main>
+      </div>
+      
+    `;
+    }
+};
+KRScaffold.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      font-size: 14px;
+      --kr-scaffold-nav-width: 210px;
+
+      /* Default to light scheme */
+      --kr-scaffold-nav-bg: #ffffff;
+      --kr-scaffold-nav-text: #000000;
+      --kr-scaffold-nav-text-active: #000000;
+      --kr-scaffold-nav-hover: #f3f4f6;
+      --kr-scaffold-nav-active-bg: #e5e7eb;
+      --kr-scaffold-nav-border: rgb(229, 229, 228);
+      --kr-scaffold-nav-divider: #e5e7eb;
+      --kr-scaffold-nav-search-bg: #f3f4f6;
+      --kr-scaffold-nav-search-focus-bg: #ffffff;
+      --kr-scaffold-nav-search-focus-border: #d1d5db;
+    }
+
+    /* Dark scheme */
+    :host([scheme="dark"]) {
+      --kr-scaffold-nav-bg: #10172a;
+      --kr-scaffold-nav-text: rgb(255 255 255 / 80%);
+      --kr-scaffold-nav-text-active: #ffffff;
+      --kr-scaffold-nav-hover: rgba(255, 255, 255, 0.05);
+      --kr-scaffold-nav-active-bg: rgb(255 255 255 / 12%);
+      --kr-scaffold-nav-border: transparent;
+      --kr-scaffold-nav-divider: rgba(255, 255, 255, 0.06);
+      --kr-scaffold-nav-search-bg: rgba(255, 255, 255, 0.15);
+      --kr-scaffold-nav-search-focus-bg: rgba(255, 255, 255, 0.2);
+      --kr-scaffold-nav-search-focus-border: rgba(255, 255, 255, 0.3);
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    /* Nav */
+    .nav {
+      width: var(--kr-scaffold-nav-width);
+      background: var(--kr-scaffold-nav-bg);
+      color: var(--kr-scaffold-nav-text);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      overflow: hidden;
+      border-right: 1px solid var(--kr-scaffold-nav-border);
+      transition: margin-left 0.3s ease;
+      margin-left: calc(-1 * var(--kr-scaffold-nav-width));
+    }
+
+    .nav--opened {
+      margin-left: 0;
+    }
+
+    .wrapper {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .nav-header {
+      height: 64px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+      transition: box-shadow 0.2s ease;
+    }
+
+    .nav--scrolled .nav-header {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    .nav-logo {
+      max-width: 100%;
+      height: 32px;
+    }
+
+    .nav-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--kr-scaffold-nav-text-active);
+      letter-spacing: .2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .nav-search {
+      padding: 4px 0 8px;
+    }
+
+    .nav-search__wrapper {
+      display: flex;
+      align-items: center;
+      background: var(--kr-scaffold-nav-search-bg);
+      border-radius: 8px;
+      padding: 0 12px;
+      height: 40px;
+      gap: 8px;
+      border: 1px solid transparent;
+      transition: all 0.15s ease;
+    }
+
+    .nav-search__wrapper:focus-within {
+      background: var(--kr-scaffold-nav-search-focus-bg);
+      border-color: var(--kr-scaffold-nav-search-focus-border);
+    }
+
+    .nav-search__icon {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      opacity: 0.6;
+    }
+
+    .nav-search__icon svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    .nav-search__input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      color: var(--kr-scaffold-nav-text-active);
+      font-size: 13px;
+      font-family: inherit;
+      min-width: 0;
+    }
+
+    .nav-search__input::placeholder {
+      color: var(--kr-scaffold-nav-text);
+      opacity: 0.7;
+    }
+
+    .nav-search__clear {
+      width: 18px;
+      height: 18px;
+      padding: 0;
+      background: none;
+      border: none;
+      color: var(--kr-scaffold-nav-text);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    .nav-search__clear:hover {
+      opacity: 1;
+    }
+
+    .nav-search__clear svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    .nav-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 9px 0.75rem 8px;
+    }
+
+    .nav-footer {
+      padding: 12px;
+      border-top: 1px solid var(--kr-scaffold-nav-divider);
+    }
+
+    .user {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    .user:hover {
+      background: var(--kr-scaffold-nav-hover);
+    }
+
+    .user__avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--kr-scaffold-avatar-bg, #beea4e);
+      color: var(--kr-scaffold-avatar-text, #10172a);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+
+    .user__avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .user__info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .user__name {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--kr-scaffold-nav-text-active);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user__email {
+      font-size: 12px;
+      color: var(--kr-scaffold-nav-text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .user-menu-container {
+      position: relative;
+    }
+
+    .user-menu {
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      right: 0;
+      margin-bottom: 8px;
+      background: var(--kr-scaffold-nav-bg);
+      border: 1px solid var(--kr-scaffold-nav-divider);
+      border-radius: 8px;
+      padding: 4px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    .user-menu__item {
+      display: block;
+      width: 100%;
+      padding: 10px 12px;
+      background: none;
+      border: none;
+      color: var(--kr-scaffold-nav-text);
+      font-size: 13px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s ease;
+    }
+
+    .user-menu__item:hover {
+      background: var(--kr-scaffold-nav-hover);
+      color: var(--kr-scaffold-nav-text-active);
+    }
+
+    .user-menu__divider {
+      height: 1px;
+      background: var(--kr-scaffold-nav-divider);
+      margin: 4px 0;
+    }
+
+    /* Main */
+    .main {
+      flex: 1;
+      min-width: 0;
+      overflow-y: auto;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .breadcrumbs {
+      height: 32px;
+      padding: 0 1rem;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #6b7280;
+      background: #f9fafb;
+      border-bottom: 1px solid #e5e7eb;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs a {
+      color: #6b7280;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      color: #111827;
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #d1d5db;
+    }
+
+    .breadcrumbs__current {
+      color: #111827;
+      font-weight: 500;
+    }
+
+    .main__content {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    /* Nav Items */
+    .nav-items {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 0 12px;
+      height: 32px;
+      border-radius: 8px;
+      color: var(--kr-scaffold-nav-text);
+      text-decoration: none;
+      cursor: pointer;
+      border: none;
+      background: none;
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      font-weight: 400;
+      font-family: inherit;
+      transition: all 0.15s ease;
+    }
+
+    .nav-item:hover {
+      background: #F3F7FC;
+      color: var(--kr-scaffold-nav-text-active);
+    }
+
+    .nav-item--active,
+    .nav-item--active:hover {
+      background: #e1e9f6;
+      color: #1a2332;
+      font-weight: 500;
+    }
+
+    .nav-item__icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .nav-item__icon svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .nav-item__label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      letter-spacing: 0.01em;
+    }
+
+    .nav-item__chevron {
+      width: 16px;
+      height: 16px;
+      transition: transform 0.2s ease;
+      transform: rotate(-90deg);
+      stroke: currentColor;
+    }
+
+    .nav-item--expanded .nav-item__chevron {
+      transform: rotate(0deg);
+    }
+
+    .nav-group {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 0;
+    }
+
+    .nav-group--expanded {
+      height: auto;
+    }
+
+    .nav-group .nav-item {
+      padding: 0 12px 0 44px;
+      height: 32px;
+      font-size: 13px;
+      font-weight: 400;
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+
+    .nav-group .nav-item:first-child {
+      margin-top: 0;
+    }
+
+    /* Nav items in groups when icons are hidden */
+    :host(:not([nav-icons-displayed])) .nav-group .nav-item {
+      padding-left: 24px;
+    }
+
+    /* Sections */
+    .nav-section {
+      padding: 16px 12px 8px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--kr-scaffold-nav-text);
+      opacity: 0.6;
+    }
+
+    .nav-section:first-child {
+      padding-top: 0;
+    }
+
+    /* Edit mode actions */
+    .edit-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .edit-actions__btn {
+      display: block;
+      width: 100%;
+      padding: 10px 12px;
+      background: var(--kr-scaffold-nav-hover);
+      border: none;
+      color: var(--kr-scaffold-nav-text);
+      font-size: 13px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s ease;
+    }
+
+    .edit-actions__btn:hover {
+      background: var(--kr-scaffold-nav-active-bg);
+      color: var(--kr-scaffold-nav-text-active);
+    }
+
+    .edit-actions__btn--primary {
+      background: #beea4e;
+      color: #10172a;
+    }
+
+    .edit-actions__btn--primary:hover {
+      background: #d4f472;
+      color: #10172a;
+    }
+
+    .edit-actions__secondary {
+      display: flex;
+      gap: 8px;
+    }
+
+    .edit-actions__secondary .edit-actions__btn {
+      flex: 1;
+    }
+
+    /* Hidden/inactive items in edit mode */
+    .nav-item--hidden {
+      opacity: 0.4;
+      font-style: italic;
+    }
+
+    .nav-item--hidden:hover {
+      opacity: 0.6;
+    }
+
+    /* Dragging state */
+    :host(.kr-scaffold--dragging),
+    :host(.kr-scaffold--dragging) * {
+      cursor: grabbing;
+      user-select: none;
+    }
+
+    .nav-item-drag-preview {
+      position: fixed;
+      pointer-events: none;
+      z-index: 1000;
+      opacity: 0.9;
+      background: var(--kr-scaffold-nav-bg);
+      border: 1px solid var(--kr-scaffold-nav-divider);
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+      padding: 0 12px;
+      height: 40px;
+      min-width: 200px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      color: var(--kr-scaffold-nav-text-active);
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    /* Drop indicator */
+    .nav-item--drop-above,
+    .nav-item--drop-below,
+    .nav-item--drop-center {
+      position: relative;
+    }
+
+    .nav-item--drop-above::before,
+    .nav-item--drop-below::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #beea4e;
+    }
+
+    .nav-item--drop-above::before {
+      top: 0;
+    }
+
+    .nav-item--drop-below::after {
+      bottom: 0;
+    }
+
+    .nav-item--drop-center {
+      background: var(--kr-scaffold-nav-active-bg);
+    }
+
+    .breadcrumbs {
+      height: 32px;
+      padding: 0 1rem;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: #6b7280;
+      //background: #f9fafb;
+      background: #beea4e;
+      border-top: 1px solid #e5e7eb;
+      flex-shrink: 0;
+    }
+
+    .breadcrumbs a {
+      //color: #6b7280;
+      color: #10172a;
+      font-size: 13px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    .breadcrumbs a:hover {
+      color: #111827;
+      text-decoration: underline;
+    }
+
+    .breadcrumbs__separator {
+      color: #d1d5db;
+    }
+
+    .breadcrumbs__current {
+      color: #111827;
+      font-weight: 500;
+    }
+
+    /* Progress bar */
+    .progress {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      overflow-x: hidden;
+      z-index: 1000;
+      display: none;
+    }
+
+    .progress--loading {
+      display: block;
+    }
+
+    .progress__track {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      background: rgba(190, 234, 78, 0.3);
+    }
+
+    .progress__bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      transform-origin: left center;
+    }
+
+    .progress__bar-inner {
+      display: inline-block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #beea4e;
+    }
+
+    .progress__bar--primary {
+      left: -145.166611%;
+    }
+
+    .progress--loading .progress__bar--primary {
+      animation: progress-primary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--primary .progress__bar-inner {
+      animation: progress-primary-scale 2s infinite linear;
+    }
+
+    .progress__bar--secondary {
+      left: -54.888891%;
+    }
+
+    .progress--loading .progress__bar--secondary {
+      animation: progress-secondary-translate 2s infinite linear;
+    }
+
+    .progress--loading .progress__bar--secondary .progress__bar-inner {
+      animation: progress-secondary-scale 2s infinite linear;
+    }
+
+    @keyframes progress-primary-translate {
+      0% {
+        transform: translateX(0);
+      }
+      20% {
+        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+        transform: translateX(0);
+      }
+      59.15% {
+        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+        transform: translateX(83.67142%);
+      }
+      100% {
+        transform: translateX(200.611057%);
+      }
+    }
+
+    @keyframes progress-primary-scale {
+      0% {
+        transform: scaleX(0.08);
+      }
+      36.65% {
+        animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+        transform: scaleX(0.08);
+      }
+      69.15% {
+        animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+        transform: scaleX(0.661479);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+
+    @keyframes progress-secondary-translate {
+      0% {
+        animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+        transform: translateX(0);
+      }
+      25% {
+        animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+        transform: translateX(37.651913%);
+      }
+      48.35% {
+        animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+        transform: translateX(84.386165%);
+      }
+      100% {
+        transform: translateX(160.277782%);
+      }
+    }
+
+    @keyframes progress-secondary-scale {
+      0% {
+        animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+        transform: scaleX(0.08);
+      }
+      19.15% {
+        animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+        transform: scaleX(0.457104);
+      }
+      44.15% {
+        animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+        transform: scaleX(0.72796);
+      }
+      100% {
+        transform: scaleX(0.08);
+      }
+    }
+  `;
+__decorate([
+    state()
+], KRScaffold.prototype, "navItemsExpanded", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "navQuery", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "activeNavItemId", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "isNavScrolled", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "isNavOpened", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "isEditing", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "isUserMenuOpen", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "pref", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "draggedNavItemId", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "navItemDropTargetId", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "navItemDropPosition", void 0);
+__decorate([
+    state()
+], KRScaffold.prototype, "pendingRequests", void 0);
+__decorate([
+    property({ type: String })
+], KRScaffold.prototype, "logo", void 0);
+__decorate([
+    property({ type: String })
+], KRScaffold.prototype, "title", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], KRScaffold.prototype, "scheme", void 0);
+__decorate([
+    property({ type: Array })
+], KRScaffold.prototype, "nav", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'nav-icons-displayed', reflect: true })
+], KRScaffold.prototype, "navIconsDisplayed", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'nav-expanded' })
+], KRScaffold.prototype, "navExpanded", void 0);
+__decorate([
+    property({ type: Object })
+], KRScaffold.prototype, "user", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRScaffold.prototype, "subbar", void 0);
+__decorate([
+    property({ type: Array })
+], KRScaffold.prototype, "breadcrumbs", void 0);
+KRScaffold = __decorate([
+    customElement('kr-scaffold')
+], KRScaffold);
+export { KRScaffold };
+//# sourceMappingURL=scaffold.js.map