js-kompo-utils 1.0.16 → 1.0.18

package/components/VlLazyHierarchy.vue

@@ -0,0 +1,799 @@
+<template>
+    <component :is="tag" v-bind="rootAttrs" :class="rootClasses" ref="root" @keyup.esc="closeDropdown">
+        <slot v-bind="slotProps">
+            <button v-if="isDropdown" type="button" class="lazy-hierarchy__trigger" :class="uiClasses.trigger" :aria-label="triggerLabel || labels.trigger" @click="togglePanel">
+                <span class="lazy-hierarchy__trigger-label">{{ triggerLabel }}</span>
+                <svg class="lazy-hierarchy__trigger-icon" :class="{ 'lazy-hierarchy__trigger-icon--open': open }" viewBox="0 0 20 20" aria-hidden="true">
+                    <path d="M5 7.5l5 5 5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </button>
+
+            <div v-if="panelOpen" class="lazy-hierarchy__panel" :class="uiClasses.panel">
+                <div v-if="hasControls" class="lazy-hierarchy__top">
+                    <div v-if="searchEnabled" class="vlInputWrapper lazy-hierarchy__search-wrap" :class="uiClasses.searchWrapper">
+                        <input v-model="search" class="vlFormControl lazy-hierarchy__search" :class="uiClasses.searchInput" type="search" :placeholder="searchPlaceholder" />
+                    </div>
+
+                    <div v-if="modeOptionsList.length" class="vlRadio lazy-hierarchy__modes" :class="uiClasses.modes">
+                        <div
+                            v-for="modeOption in modeOptionsList"
+                            :key="modeOption.value"
+                            class="lazy-hierarchy__mode"
+                            :class="[uiClasses.mode, { 'lazy-hierarchy__mode--active': mode === modeOption.value }]"
+                            @click="mode = modeOption.value"
+                        >
+                            <div class="vlInputWrapper lazy-hierarchy__radio-control">
+                                <input v-model="mode" type="radio" :value="modeOption.value" :id="modeRadioId(modeOption.value)" />
+                                <span class="lazy-hierarchy__radio-dot" aria-hidden="true"></span>
+                            </div>
+                            <label class="vlFormLabel lazy-hierarchy__mode-label" :for="modeRadioId(modeOption.value)">{{ modeOption.label }}</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="lazy-hierarchy__body mini-scroll" :class="uiClasses.body">
+                    <div v-if="isTreeLoading && !hasNodes" class="lazy-hierarchy__status">
+                        <span class="lazy-hierarchy__status-label">
+                            <span class="lazy-hierarchy__spinner" aria-hidden="true"></span>
+                            <span>{{ labels.loading }}</span>
+                        </span>
+                        <span v-for="index in 5" :key="index" class="lazy-hierarchy__skeleton-row" aria-hidden="true">
+                            <span class="lazy-hierarchy__skeleton-name"></span>
+                            <span class="lazy-hierarchy__skeleton-pill"></span>
+                        </span>
+                    </div>
+                    <div v-else-if="error" class="lazy-hierarchy__status lazy-hierarchy__status--error">{{ labels.error }}</div>
+                    <div v-else-if="bootstrapped && rootNodeIds.length === 0" class="lazy-hierarchy__status">{{ labels.empty }}</div>
+
+                    <vl-lazy-tree v-else v-bind="treeProps" @toggle="toggleNode" @load-more="loadMoreFromTree">
+                        <template v-slot:node="item">
+                            <div class="lazy-hierarchy-node" :class="{ 'lazy-hierarchy-node--current': item.node.isCurrent }">
+                                <div class="lazy-hierarchy-node__row" :class="uiClasses.nodeRow" :style="item.indentStyle">
+                                    <button
+                                        v-if="item.hasChildren"
+                                        type="button"
+                                        class="lazy-hierarchy-node__toggle"
+                                        :aria-expanded="item.isExpanded ? 'true' : 'false'"
+                                        @click.stop="item.toggle"
+                                    >
+                                        <svg class="lazy-hierarchy-node__chevron" :class="{ 'lazy-hierarchy-node__chevron--open': item.isExpanded }" viewBox="0 0 20 20" aria-hidden="true">
+                                            <path d="M7.5 5l5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </button>
+                                    <span v-else class="lazy-hierarchy-node__toggle-spacer"></span>
+
+                                    <component v-bind="kompoElementAttributes(item.node.render, item)" class="lazy-hierarchy-node__content" />
+                                </div>
+                            </div>
+                        </template>
+
+                        <template v-slot:loading="item">
+                            <div :key="item.key" class="lazy-hierarchy-node__loading" :style="item.indentStyle">
+                                <span class="lazy-hierarchy__skeleton-row" aria-hidden="true">
+                                    <span class="lazy-hierarchy__skeleton-name"></span>
+                                    <span class="lazy-hierarchy__skeleton-pill"></span>
+                                </span>
+                            </div>
+                        </template>
+
+                        <template v-slot:load-more="item">
+                            <vl-infinite-load
+                                :key="item.key"
+                                class="lazy-hierarchy__show-more"
+                                :button-class="uiClasses.showMore"
+                                :loading="item.isLoading"
+                                :disabled="item.isLoading"
+                                :label="labels.showMore"
+                                :loading-label="labels.loading"
+                                @visible="item.loadMore"
+                            />
+                        </template>
+                    </vl-lazy-tree>
+                </div>
+            </div>
+        </slot>
+    </component>
+</template>
+
+<script>
+import Other from 'vue-kompo/js/form/mixins/Other'
+import VlInfiniteLoad from './VlInfiniteLoad.vue'
+import VlLazyTree from './VlLazyTree.vue'
+
+const ROOT_KEY = 'root'
+
+const configValue = (vm, key) => vm.vkompo && vm.vkompo.config ? vm.vkompo.config[key] : undefined
+
+export default {
+    name: 'VlLazyHierarchy',
+    inheritAttrs: false,
+    mixins: [Other],
+    components: { VlInfiniteLoad, VlLazyTree },
+    props: {
+        vkompo: { type: Object, default: null },
+        kompoid: { type: String, default: '' },
+        kompoinfo: { type: String, default: '' },
+        tag: { type: String, default: 'div' },
+        rootKey: { type: String, default: ROOT_KEY },
+        parentParam: { type: String, default: 'parent_id' },
+        cursorParam: { type: String, default: 'cursor' },
+        limit: { type: Number, default: 20 },
+        lookahead: { type: Number, default: 80 },
+        autoLoad: { type: Boolean, default: true },
+        deferLoad: { type: Boolean, default: false },
+        baseIndent: { type: Number, default: 1 },
+        indentStep: { type: Number, default: 0.9 },
+        maxIndentDepth: { type: Number, default: 5 },
+    },
+    data() {
+        const modes = configValue(this, 'modes') || {}
+        const modeOptions = modes.options || {}
+
+        return {
+            open: false,
+            mode: modes.default || Object.keys(modeOptions)[0] || '',
+            search: '',
+            appliedSearch: '',
+            searchTimer: null,
+            nodesById: {},
+            childrenByParent: { [this.resolvedRootKey]: [] },
+            pagingByParent: {},
+            expanded: {},
+            loadingParents: {},
+            loadingInitial: false,
+            bootstrapped: false,
+            bootstrapPromise: null,
+            error: '',
+            requestSeq: 0,
+        }
+    },
+    computed: {
+        rootAttrs() {
+            return {
+                ...this.$attrs,
+                ...(this.vkompo && this.vkompo.id ? { id: this.vkompo.id } : {}),
+                style: [this.vkompo?.style, this.$attrs.style].filter(Boolean),
+            }
+        },
+        rootClasses() {
+            return ['vl-lazy-hierarchy', 'lazy-hierarchy', `lazy-hierarchy--${this.displayMode}`, this.vkompo?.class].filter(Boolean)
+        },
+        displayMode() { return this.configOr('displayMode', 'inline') },
+        isDropdown() { return this.displayMode !== 'inline' },
+        panelOpen() { return this.open || !this.isDropdown },
+        hasControls() { return this.searchEnabled || this.modeOptionsList.length > 0 },
+        triggerLabel() { return this.configValue('triggerLabel') || '' },
+        searchConfig() { return this.configOr('search', {}) },
+        searchEnabled() { return !!this.searchConfig.enabled },
+        searchPlaceholder() { return this.searchConfig.placeholder || this.labels.searchPlaceholder },
+        searchParam() { return this.searchConfig.param || 'search' },
+        searchDebounce() { return this.searchConfig.debounce || 350 },
+        modeConfig() { return this.configOr('modes', {}) },
+        modeParam() { return this.modeConfig.param || 'mode' },
+        modeOptionsList() {
+            return Object.entries(this.modeConfig.options || {}).map(([value, label]) => ({ value, label }))
+        },
+        labels() {
+            const labels = this.configOr('labels', {})
+            return {
+                searchPlaceholder: labels.searchPlaceholder || 'Search',
+                loading: labels.loading || 'Loading...',
+                empty: labels.empty || 'No items found',
+                error: labels.error || 'Unable to load items',
+                showMore: labels.showMore || 'Show more',
+                trigger: labels.trigger || 'Open',
+            }
+        },
+        uiClasses() { return this.configOr('classes', {}) },
+        resolvedRootKey() { return this.configOr('rootKey', this.rootKey) },
+        resolvedBootstrapUrl() { return this.configValue('bootstrapUrl') },
+        resolvedNodesUrl() { return this.configValue('nodesUrl') },
+        resolvedRequestParams() {
+            const params = { ...(this.configValue('params') || {}) }
+            if (this.searchEnabled) params[this.searchParam] = this.appliedSearch
+            if (this.modeOptionsList.length && this.mode) params[this.modeParam] = this.mode
+            return params
+        },
+        resolvedLimit() { return this.configOr('limit', this.limit) },
+        resolvedLookahead() { return this.configOr('lookahead', this.lookahead) },
+        resolvedBaseIndent() { return this.configOr('baseIndent', this.baseIndent) },
+        resolvedIndentStep() { return this.configOr('indentStep', this.indentStep) },
+        resolvedMaxIndentDepth() { return this.configOr('maxIndentDepth', this.maxIndentDepth) },
+        resolvedParentParam() { return this.configValue('parentParam') || this.parentParam },
+        resolvedCursorParam() { return this.configValue('cursorParam') || this.cursorParam },
+        resolvedAutoLoad() {
+            const c = this.configValue('autoLoad')
+            return c === undefined ? this.autoLoad : !!c
+        },
+        resolvedDeferLoad() {
+            const c = this.configValue('deferLoad')
+            return c === undefined ? this.deferLoad : !!c
+        },
+        rootNodeIds() { return this.childrenByParent[this.resolvedRootKey] || [] },
+        hasNodes() { return Object.keys(this.nodesById).length > 0 },
+        isTreeLoading() { return this.loadingInitial || !!this.bootstrapPromise },
+        treeProps() {
+            return {
+                rootKey: this.resolvedRootKey,
+                rootNodeIds: this.rootNodeIds,
+                nodesById: this.nodesById,
+                childrenByParent: this.childrenByParent,
+                pagingByParent: this.pagingByParent,
+                expanded: this.expanded,
+                loadingParents: this.loadingParents,
+                baseIndent: this.resolvedBaseIndent,
+                indentStep: this.resolvedIndentStep,
+                maxIndentDepth: this.resolvedMaxIndentDepth,
+                loadingLabel: this.labels.loading,
+                showMoreLabel: this.labels.showMore,
+            }
+        },
+        slotProps() {
+            return {
+                ...this.treeProps,
+                treeProps: this.treeProps,
+                rootNodeIds: this.rootNodeIds,
+                hasNodes: this.hasNodes,
+                isTreeLoading: this.isTreeLoading,
+                bootstrapped: this.bootstrapped,
+                error: this.error,
+                ensureBootstrap: this.ensureBootstrap,
+                reloadTree: this.reloadTree,
+                resetTree: this.resetTree,
+                toggleNode: this.toggleNode,
+                loadChildren: this.loadChildren,
+                loadMore: this.loadMore,
+                loadMoreRoot: this.loadMoreRoot,
+                loadMoreFromTree: this.loadMoreFromTree,
+            }
+        },
+    },
+    watch: {
+        mode() {
+            if (this.searchTimer) {
+                clearTimeout(this.searchTimer)
+                this.searchTimer = null
+                this.appliedSearch = this.search
+            }
+            if (this.bootstrapped || this.bootstrapPromise) this.reloadTree()
+        },
+        search() {
+            clearTimeout(this.searchTimer)
+            this.searchTimer = setTimeout(() => {
+                this.appliedSearch = this.search
+                if (this.bootstrapped || this.bootstrapPromise) this.reloadTree()
+            }, this.searchDebounce)
+        },
+    },
+    mounted() {
+        document.addEventListener('click', this.onDocumentClick)
+        if (!this.resolvedAutoLoad) return
+        if (this.resolvedDeferLoad) { this.deferBootstrap(); return }
+        this.ensureBootstrap(true)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.onDocumentClick)
+        clearTimeout(this.searchTimer)
+    },
+    methods: {
+        configValue(key) { return configValue(this, key) },
+        configOr(key, fallback) {
+            const v = this.configValue(key)
+            return v === undefined ? fallback : v
+        },
+        modeRadioId(value) { return `lazy-hierarchy-${this._uid}-${value}` },
+        togglePanel() {
+            if (!this.isDropdown) return
+            this.open = !this.open
+            if (this.open) this.ensureBootstrap(true)
+        },
+        closeDropdown() { if (this.isDropdown) this.open = false },
+        onDocumentClick(event) {
+            if (!this.isDropdown || !this.open || !this.$refs.root || this.$refs.root.contains(event.target)) return
+            this.open = false
+        },
+        deferBootstrap() {
+            const run = () => this.ensureBootstrap(false)
+            if (window.requestIdleCallback) { window.requestIdleCallback(run, { timeout: 1200 }); return }
+            setTimeout(run, 250)
+        },
+        reloadTree(showLoading = true) {
+            this.resetTree()
+            return this.ensureBootstrap(showLoading)
+        },
+        resetTree() {
+            this.nodesById = {}
+            this.childrenByParent = { [this.resolvedRootKey]: [] }
+            this.pagingByParent = {}
+            this.expanded = {}
+            this.loadingParents = {}
+            this.bootstrapped = false
+            this.bootstrapPromise = null
+            this.error = ''
+        },
+        ensureBootstrap(showLoading = true) {
+            if (this.bootstrapped) return Promise.resolve()
+            if (this.bootstrapPromise) {
+                if (showLoading) this.loadingInitial = true
+                return this.bootstrapPromise
+            }
+            const seq = ++this.requestSeq
+            if (showLoading) this.loadingInitial = true
+            this.error = ''
+            this.bootstrapPromise = this.getJson(this.resolvedBootstrapUrl, this.baseParams())
+                .then(payload => {
+                    if (seq !== this.requestSeq) return
+                    this.mergePayload(payload)
+                    this.bootstrapped = true
+                    this.$emit('loaded', payload)
+                })
+                .catch(error => this.handleError(error, seq))
+                .finally(() => {
+                    if (seq === this.requestSeq) {
+                        this.loadingInitial = false
+                        this.bootstrapPromise = null
+                    }
+                })
+            return this.bootstrapPromise
+        },
+        baseParams(extra = {}) {
+            return { ...this.resolvedRequestParams, limit: this.resolvedLimit, lookahead: this.resolvedLookahead, ...extra }
+        },
+        toggleNode(node) {
+            if (!node || !node.id || !node.hasChildren) return
+            if (this.expanded[node.id]) { this.$set(this.expanded, node.id, false); return }
+            this.$set(this.expanded, node.id, true)
+            if (!Object.prototype.hasOwnProperty.call(this.childrenByParent, node.id)) this.loadChildren(node)
+        },
+        loadChildren(node) {
+            if (!node || this.loadingParents[node.id]) return Promise.resolve()
+            this.$set(this.loadingParents, node.id, true)
+            return this.getJson(this.resolvedNodesUrl, this.baseParams({ [this.resolvedParentParam]: node.id }))
+                .then(payload => this.mergePayload(payload))
+                .catch(error => this.handleError(error))
+                .finally(() => this.$set(this.loadingParents, node.id, false))
+        },
+        loadMore(node) {
+            if (!node || !node.id || this.loadingParents[node.id]) return Promise.resolve()
+            const paging = this.pagingByParent[node.id]
+            if (!paging || paging.nextCursor === null) return Promise.resolve()
+            this.$set(this.loadingParents, node.id, true)
+            return this.getJson(this.resolvedNodesUrl, this.baseParams({
+                [this.resolvedParentParam]: node.id,
+                [this.resolvedCursorParam]: paging.nextCursor,
+            }))
+                .then(payload => this.mergePayload(payload, node.id))
+                .catch(error => this.handleError(error))
+                .finally(() => this.$set(this.loadingParents, node.id, false))
+        },
+        loadMoreRoot() {
+            const rootKey = this.resolvedRootKey
+            const paging = this.pagingByParent[rootKey]
+            if (!paging || paging.nextCursor === null || this.loadingParents[rootKey]) return Promise.resolve()
+            this.$set(this.loadingParents, rootKey, true)
+            return this.getJson(this.resolvedNodesUrl, this.baseParams({ [this.resolvedCursorParam]: paging.nextCursor }))
+                .then(payload => this.mergePayload(payload, rootKey))
+                .catch(error => this.handleError(error))
+                .finally(() => this.$set(this.loadingParents, rootKey, false))
+        },
+        loadMoreFromTree(item) {
+            if (!item) return Promise.resolve()
+            return item.root ? this.loadMoreRoot() : this.loadMore(item.parentNode)
+        },
+        mergePayload(payload, appendParentKey = null) {
+            Object.entries(payload.nodes || {}).forEach(([id, node]) => { this.$set(this.nodesById, id, node) })
+            Object.entries(payload.children || {}).forEach(([parentKey, childIds]) => {
+                const existing = this.childrenByParent[parentKey] || []
+                const shouldAppend = appendParentKey === parentKey || (payload.paging && payload.paging[parentKey] && payload.paging[parentKey].append)
+                const next = shouldAppend ? this.unique([...existing, ...childIds]) : this.unique(childIds)
+                this.$set(this.childrenByParent, parentKey, next)
+            })
+            Object.entries(payload.paging || {}).forEach(([parentKey, paging]) => { this.$set(this.pagingByParent, parentKey, paging) })
+            ;(payload.expandedIds || []).forEach(id => { this.$set(this.expanded, id, true) })
+        },
+        unique(values) { return [...new Set(values)] },
+        getJson(url, params = {}) {
+            const requestUrl = new URL(url, window.location.origin)
+            Object.entries(params).forEach(([key, value]) => {
+                if (value !== null && value !== undefined && value !== '') requestUrl.searchParams.set(key, value)
+            })
+            return fetch(requestUrl.toString(), { headers: this.requestHeaders(), credentials: 'same-origin' }).then(this.parseResponse)
+        },
+        requestHeaders(extra = {}) {
+            const kompoInfo = this.kompoInfoHeader()
+            return {
+                'X-Requested-With': 'XMLHttpRequest',
+                ...(kompoInfo ? { 'X-Kompo-Info': kompoInfo } : {}),
+                ...extra,
+            }
+        },
+        kompoInfoHeader() {
+            if (this.kompoinfo) return this.kompoinfo
+            if (this.$_kompoInfo) return this.$_kompoInfo
+            if (this.kompoInfo) return this.kompoInfo
+            return ''
+        },
+        parseResponse(response) {
+            if (!response.ok) throw new Error(`${response.status} ${response.statusText}`)
+            return response.json()
+        },
+        handleError(error, seq = this.requestSeq) {
+            if (seq !== this.requestSeq) return
+            this.error = error.message || this.labels.error
+            this.$emit('error', this.error)
+        },
+        kompoElementAttributes(component, item) {
+            return {
+                key: component.id || item.key,
+                is: this.vueTag(component),
+                vkompo: component,
+                kompoid: this.kompoid || this.$_elKompoId,
+            }
+        },
+        vueTag(component) { return 'Vl' + component.vueComponent },
+    },
+}
+</script>
+
+<style>
+.lazy-hierarchy {
+    --lazy-hierarchy-primary: var(--level1, var(--greenmain, var(--primary, currentColor)));
+    --lazy-hierarchy-primary-dark: var(--greendark, var(--primary-dark, var(--lazy-hierarchy-primary)));
+    --lazy-hierarchy-primary-soft: color-mix(in srgb, var(--lazy-hierarchy-primary) 9%, transparent);
+    --lazy-hierarchy-primary-soft-hover: color-mix(in srgb, var(--lazy-hierarchy-primary) 13%, transparent);
+    position: relative;
+    display: block;
+    color: var(--lazy-hierarchy-primary);
+}
+
+.lazy-hierarchy--dropdown { display: inline-flex; }
+
+.lazy-hierarchy__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border: 0;
+    background: transparent;
+    color: #1f2933;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.2;
+    cursor: pointer;
+    padding: 0.25rem 0.35rem;
+}
+
+.lazy-hierarchy__trigger-label {
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.lazy-hierarchy__trigger-icon {
+    width: 1rem;
+    height: 1rem;
+    flex: 0 0 1rem;
+    display: block;
+    color: var(--lazy-hierarchy-primary);
+    transform: translateY(0.05rem);
+    transform-origin: center;
+    transition: transform 0.2s ease;
+}
+.lazy-hierarchy__trigger-icon--open { transform: translateY(0.05rem) rotate(180deg); }
+
+.lazy-hierarchy__panel {
+    position: absolute;
+    top: calc(100% + 0.45rem);
+    right: 0;
+    width: 33rem;
+    max-width: calc(100vw - 1rem);
+    max-height: min(28rem, calc(100vh - 4rem));
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border: 1px solid #e7ece9;
+    border-radius: 8px;
+    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.11);
+    z-index: 940;
+    overflow: hidden;
+}
+.lazy-hierarchy--inline .lazy-hierarchy__panel {
+    position: static;
+    width: 100%;
+    max-width: none;
+    max-height: none;
+    border: 0;
+    box-shadow: none;
+}
+
+.lazy-hierarchy__top {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.25rem;
+    flex: 0 0 auto;
+    padding: 1.5rem;
+    border-bottom: 1px solid #edf1ef;
+}
+
+.lazy-hierarchy__search-wrap { min-width: 0; flex: 1 1 auto; margin: 0; }
+.lazy-hierarchy__search { width: 100%; min-height: 2.35rem; font-size: 0.8125rem; }
+
+.lazy-hierarchy__modes { display: flex; flex-direction: column; gap: 0.5rem; flex: 0 0 auto; }
+.lazy-hierarchy__mode {
+    display: flex;
+    align-items: center;
+    color: #334155;
+    font-size: 0.75rem;
+    line-height: 1;
+    cursor: pointer;
+    white-space: nowrap;
+    min-height: 1.35rem;
+}
+.lazy-hierarchy__radio-control {
+    width: 1.15rem !important;
+    min-width: 1.15rem !important;
+    max-width: 1.15rem !important;
+    height: 1.15rem !important;
+    min-height: 1.15rem !important;
+    max-height: 1.15rem !important;
+    flex: 0 0 1.15rem;
+    display: inline-block;
+    position: relative;
+    margin-right: 0.5rem;
+    padding: 0;
+    background: #fff;
+    border: 0;
+    border-radius: 9999px;
+    box-shadow: none;
+    overflow: hidden;
+}
+.lazy-hierarchy__radio-control::after { display: none; }
+.lazy-hierarchy__mode input {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    appearance: none;
+    border: 0;
+    border-radius: 9999px;
+    background: transparent;
+    color: var(--lazy-hierarchy-primary);
+    cursor: pointer;
+    opacity: 0;
+}
+.lazy-hierarchy__radio-dot {
+    position: absolute;
+    inset: 0;
+    border: 1px solid #d9e3df;
+    border-radius: 9999px;
+    background: #fff;
+    pointer-events: none;
+}
+.lazy-hierarchy__radio-dot::after {
+    content: "";
+    position: absolute;
+    inset: 0.32rem;
+    border-radius: 9999px;
+    background: transparent;
+}
+.lazy-hierarchy__mode input:checked + .lazy-hierarchy__radio-dot {
+    border-color: var(--lazy-hierarchy-primary);
+    background: var(--lazy-hierarchy-primary);
+}
+.lazy-hierarchy__mode input:checked + .lazy-hierarchy__radio-dot::after { background: #fff; }
+.lazy-hierarchy__radio-control:focus-within { box-shadow: 0 0 0 3px var(--lazy-hierarchy-primary-soft-hover); }
+.lazy-hierarchy__mode-label { margin: 0; color: inherit; font-size: 0.75rem; line-height: 1; }
+.lazy-hierarchy__mode--active { color: var(--lazy-hierarchy-primary); font-weight: 700; }
+
+.lazy-hierarchy__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.45rem 0 0.75rem; }
+
+.lazy-hierarchy__status {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.65rem;
+    padding: 1.1rem 0.65rem;
+    color: #64748b;
+    font-size: 0.8125rem;
+    text-align: center;
+}
+.lazy-hierarchy__status--error { color: #b42318; }
+.lazy-hierarchy__status-label { display: inline-flex; align-items: center; gap: 0.5rem; }
+
+.lazy-hierarchy__spinner {
+    width: 0.9rem;
+    height: 0.9rem;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 9999px;
+    animation: lazy-hierarchy-spin 0.65s linear infinite;
+}
+
+.lazy-hierarchy__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+@keyframes lazy-hierarchy-spin { to { transform: rotate(360deg); } }
+
+.lazy-hierarchy__skeleton-row {
+    width: 100%;
+    min-height: 2.35rem;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+.lazy-hierarchy__skeleton-name,
+.lazy-hierarchy__skeleton-pill {
+    display: inline-block;
+    height: 0.8rem;
+    border-radius: 9999px;
+    background: linear-gradient(90deg, #eef4f1 0%, #f8faf9 50%, #eef4f1 100%);
+    background-size: 180% 100%;
+    animation: lazy-hierarchy-skeleton 1.1s ease-in-out infinite;
+}
+.lazy-hierarchy__skeleton-name { flex: 1 1 auto; }
+.lazy-hierarchy__skeleton-pill { width: 4.2rem; }
+@keyframes lazy-hierarchy-skeleton {
+    0% { background-position: 100% 0; }
+    100% { background-position: -100% 0; }
+}
+
+.lazy-hierarchy-node__row {
+    min-height: 2.55rem;
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    padding-top: 0.2rem;
+    padding-right: 1rem;
+    padding-bottom: 0.2rem;
+    color: var(--lazy-hierarchy-primary);
+}
+.lazy-hierarchy-node--current > .lazy-hierarchy-node__row { background: var(--lazy-hierarchy-primary-soft); }
+.lazy-hierarchy-node--current > .lazy-hierarchy-node__row:hover { background: var(--lazy-hierarchy-primary-soft-hover); }
+.lazy-hierarchy-node__row:hover { background: #f8faf9; }
+
+.lazy-hierarchy-node__content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.45rem; }
+
+.lazy-hierarchy-node__toggle,
+.lazy-hierarchy-node__toggle-spacer {
+    width: 1rem;
+    height: 1.35rem;
+    flex: 0 0 1rem;
+}
+.lazy-hierarchy-node__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    background: transparent;
+    color: var(--lazy-hierarchy-primary-dark);
+    line-height: 1;
+    cursor: pointer;
+}
+.lazy-hierarchy-node__chevron {
+    width: 0.9rem;
+    height: 0.9rem;
+    flex: 0 0 0.9rem;
+    transition: transform 0.2s ease;
+}
+.lazy-hierarchy-node__chevron--open { transform: rotate(90deg); }
+
+/* Generic visual primitives for node-render composition.
+   Factories render their rows as trees containing these classes;
+   specific colors are applied inline via kompo's ->style() on the element. */
+
+.lazy-hierarchy__badge {
+    display: inline-block;
+    min-width: 3.8rem;
+    padding: 0.25rem 0.75rem;
+    text-align: center;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    color: #fff;
+}
+
+.lazy-hierarchy__chip-button {
+    display: inline-block;
+    max-width: 6rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0.25rem 0.75rem;
+    border: 0;
+    border-radius: 9999px;
+    background: transparent;
+    color: var(--lazy-hierarchy-primary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+.lazy-hierarchy__chip-button:hover {
+    background: color-mix(in srgb, var(--lazy-hierarchy-primary) 8%, white);
+    text-decoration: none;
+}
+.lazy-hierarchy__chip-button--current {
+    background: var(--lazy-hierarchy-primary);
+    color: #fff;
+}
+.lazy-hierarchy__chip-button--current:hover {
+    background: var(--lazy-hierarchy-primary);
+    color: #fff;
+}
+
+.lazy-hierarchy__icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.65rem;
+    height: 1.65rem;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--lazy-hierarchy-primary);
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+.lazy-hierarchy__icon-button:hover {
+    background: color-mix(in srgb, var(--lazy-hierarchy-primary) 8%, white);
+    text-decoration: none;
+}
+.lazy-hierarchy__icon-button svg {
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+.lazy-hierarchy-node__loading {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.55rem;
+    color: #64748b;
+    font-size: 0.75rem;
+}
+
+.lazy-hierarchy__show-more {
+    display: flex;
+    width: calc(100% - 1rem);
+    margin: 0.55rem 0.5rem 0.35rem;
+    border: 1px solid #dbe4df;
+    border-radius: 6px;
+    background: #fff;
+    color: var(--lazy-hierarchy-primary);
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.5rem;
+}
+.lazy-hierarchy__show-more:hover { background: #f5fbf7; }
+
+.lazy-hierarchy button:disabled { cursor: wait; opacity: 0.65; }
+
+@media (max-width: 640px) {
+    .lazy-hierarchy__panel {
+        top: calc(100% + 0.35rem);
+        right: -0.25rem;
+        width: calc(100vw - 1rem);
+    }
+    .lazy-hierarchy__top { flex-direction: column; }
+    .lazy-hierarchy__modes { flex-direction: row; }
+}
+</style>