@chromvoid/uikit 0.1.0

package/dist/components/cv-treeitem.js

@@ -0,0 +1,144 @@
+import { LitElement, css, html } from 'lit';
+export class CVTreeItem extends LitElement {
+    static elementName = 'cv-treeitem';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            label: { type: String, reflect: true },
+            disabled: { type: Boolean, reflect: true },
+            active: { type: Boolean, reflect: true },
+            selected: { type: Boolean, reflect: true },
+            expanded: { type: Boolean, reflect: true },
+            branch: { type: Boolean, reflect: true },
+            level: { type: Number, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.value = '';
+        this.label = '';
+        this.disabled = false;
+        this.active = false;
+        this.selected = false;
+        this.expanded = false;
+        this.branch = false;
+        this.level = 1;
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+        outline: none;
+        --cv-treeview-indent-size: 1.5rem;
+        --cv-treeview-indent-guide-width: 0px;
+        --cv-treeview-indent-guide-color: var(--cv-color-border, #2a3245);
+        --cv-treeview-indent-guide-style: solid;
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
+
+      [part='row'] {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+        gap: var(--cv-space-1, 4px);
+        min-block-size: 32px;
+        padding-inline-start: calc(var(--cv-treeview-indent-size) * max(var(--cv-tree-level, 1) - 1, 0));
+        padding-inline-end: var(--cv-space-2, 8px);
+        border-radius: var(--cv-radius-sm, 6px);
+      }
+
+      :host([active]) [part='row'] {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 22%, transparent);
+      }
+
+      :host([selected]) [part='row'] {
+        background: color-mix(in oklab, var(--cv-color-primary, #65d7ff) 30%, transparent);
+      }
+
+      :host([disabled]) [part='row'] {
+        opacity: 0.55;
+      }
+
+      :host(:focus-visible) [part='row'] {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+
+      [part='toggle'] {
+        inline-size: 22px;
+        block-size: 22px;
+        border-radius: var(--cv-radius-xs, 4px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+        color: var(--cv-color-text, #e8ecf6);
+        font-size: 11px;
+        line-height: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      [part='toggle'][hidden] {
+        visibility: hidden;
+      }
+
+      [part='children'] {
+        display: block;
+        position: relative;
+        padding-inline-start: var(--cv-treeview-indent-size);
+      }
+
+      [part='children']::before {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: calc(var(--cv-treeview-indent-size) / 2);
+        inline-size: var(--cv-treeview-indent-guide-width);
+        border-inline-start: var(--cv-treeview-indent-guide-width) var(--cv-treeview-indent-guide-style)
+          var(--cv-treeview-indent-guide-color);
+      }
+
+      [part='children'][hidden] {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    handleToggleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent('cv-treeitem-toggle', {
+            detail: { id: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        this.style.setProperty('--cv-tree-level', String(this.level));
+        return html `
+      <div part="row">
+        <button
+          type="button"
+          aria-hidden=${this.branch ? 'false' : 'true'}
+          ?hidden=${!this.branch}
+          part="toggle"
+          @click=${this.handleToggleClick}
+        >
+          ${this.expanded ? '▾' : '▸'}
+        </button>
+        <span part="label"><slot name="label">${this.label}</slot></span>
+      </div>
+
+      <div role="group" ?hidden=${!this.expanded} part="children">
+        <slot name="children"></slot>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-treeview.d.ts

@@ -0,0 +1,70 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVTreeviewEventDetail {
+    value: string | null;
+    values: string[];
+    activeId: string | null;
+    expandedValues: string[];
+}
+export declare class CVTreeview extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        values: {
+            attribute: boolean;
+        };
+        expandedValues: {
+            attribute: boolean;
+        };
+        selectionMode: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: string;
+    values: string[];
+    expandedValues: string[];
+    selectionMode: 'single' | 'multiple';
+    ariaLabel: string;
+    private readonly idBase;
+    private itemRecords;
+    private itemListeners;
+    private model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private getDirectChildTreeItems;
+    private ensureItemValue;
+    private parseTreeNodes;
+    private rebuildModelFromSlot;
+    private detachItemListeners;
+    private attachItemListeners;
+    private syncItemElements;
+    private syncControlledValuesFromModel;
+    private setSelectedIdsInModel;
+    private setExpandedIdsInModel;
+    private captureSnapshot;
+    private dispatchInput;
+    private dispatchChange;
+    private focusActiveItem;
+    private applyProgrammaticChange;
+    private applyInteractionResult;
+    private handleItemClick;
+    private handleItemFocus;
+    private handleItemToggle;
+    private handleTreeKeyDown;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-treeview.js

@@ -0,0 +1,396 @@
+import { createTreeview } from '@chromvoid/headless-ui/treeview';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+import { CVTreeItem } from './cv-treeitem.js';
+const treeviewKeysToPrevent = new Set([
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'Home',
+    'End',
+    'Enter',
+    ' ',
+    'Spacebar',
+]);
+const arraysEqual = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+let cvTreeviewNonce = 0;
+export class CVTreeview extends ReatomLitElement {
+    static elementName = 'cv-treeview';
+    static get properties() {
+        return {
+            value: { type: String, reflect: true },
+            values: { attribute: false },
+            expandedValues: { attribute: false },
+            selectionMode: { type: String, attribute: 'selection-mode', reflect: true },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+        };
+    }
+    idBase = `cv-treeview-${++cvTreeviewNonce}`;
+    itemRecords = [];
+    itemListeners = new WeakMap();
+    model;
+    constructor() {
+        super();
+        this.value = '';
+        this.values = [];
+        this.expandedValues = [];
+        this.selectionMode = 'single';
+        this.ariaLabel = '';
+        this.model = createTreeview({
+            idBase: this.idBase,
+            nodes: [],
+        });
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        display: grid;
+        gap: var(--cv-space-1, 4px);
+        padding: var(--cv-space-1, 4px);
+        border-radius: var(--cv-radius-md, 10px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+      }
+
+      [part='base']:focus-visible {
+        outline: 2px solid var(--cv-color-primary, #65d7ff);
+        outline-offset: 1px;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.rebuildModelFromSlot(false, false);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachItemListeners();
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('selectionMode') || changedProperties.has('ariaLabel')) {
+            this.rebuildModelFromSlot(true, false);
+            return;
+        }
+        if (changedProperties.has('value') && this.selectionMode === 'single') {
+            const normalized = this.value.trim();
+            if (this.value !== normalized) {
+                this.value = normalized;
+            }
+            if (normalized.length === 0) {
+                this.model.actions.clearSelected();
+            }
+            else {
+                this.model.actions.select(normalized);
+            }
+            this.applyProgrammaticChange();
+        }
+        if (changedProperties.has('values') && this.selectionMode === 'multiple') {
+            this.setSelectedIdsInModel(this.values);
+            this.applyProgrammaticChange();
+        }
+        if (changedProperties.has('expandedValues')) {
+            this.setExpandedIdsInModel(this.expandedValues);
+            this.applyProgrammaticChange();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (!changedProperties.has('value') &&
+            !changedProperties.has('values') &&
+            !changedProperties.has('expandedValues')) {
+            this.syncItemElements();
+        }
+    }
+    getDirectChildTreeItems(container) {
+        return Array.from(container.children ?? []).filter((element) => element.tagName.toLowerCase() === CVTreeItem.elementName);
+    }
+    ensureItemValue(item, index) {
+        const normalized = item.value?.trim();
+        if (normalized)
+            return normalized;
+        const fallback = `item-${index + 1}`;
+        item.value = fallback;
+        return fallback;
+    }
+    parseTreeNodes(container, parentId, depth) {
+        const items = this.getDirectChildTreeItems(container);
+        return items.map((item, index) => {
+            const id = this.ensureItemValue(item, index);
+            const children = this.parseTreeNodes(item, id, depth + 1);
+            this.itemRecords.push({
+                id,
+                parentId,
+                branch: children.length > 0,
+                element: item,
+            });
+            if (parentId != null) {
+                item.slot = 'children';
+            }
+            else {
+                item.slot = '';
+            }
+            return {
+                id,
+                label: item.label || item.textContent?.trim() || id,
+                disabled: item.disabled,
+                children,
+            };
+        });
+    }
+    rebuildModelFromSlot(preserveState, requestRender = true) {
+        const previous = preserveState ? this.captureSnapshot() : null;
+        this.detachItemListeners();
+        this.itemRecords = [];
+        const nodes = this.parseTreeNodes(this, null, 1);
+        const validIds = new Set(this.itemRecords.map((record) => record.id));
+        const initialExpandedIds = (previous?.expandedIds ?? this.expandedValues).filter((id) => validIds.has(id));
+        const initialSelectedIds = this.selectionMode === 'multiple'
+            ? (previous?.selectedIds ?? this.values).filter((id) => validIds.has(id))
+            : [previous?.selectedIds[0] ?? this.value].filter((id) => typeof id === 'string' && validIds.has(id));
+        const initialActiveIdCandidate = previous?.activeId ?? initialSelectedIds[0] ?? null;
+        const initialActiveId = initialActiveIdCandidate && validIds.has(initialActiveIdCandidate) ? initialActiveIdCandidate : null;
+        this.model = createTreeview({
+            idBase: this.idBase,
+            nodes,
+            selectionMode: this.selectionMode,
+            ariaLabel: this.ariaLabel || undefined,
+            initialExpandedIds,
+            initialSelectedIds,
+            initialActiveId,
+        });
+        this.attachItemListeners();
+        this.syncItemElements();
+        this.syncControlledValuesFromModel();
+        if (requestRender) {
+            this.requestUpdate();
+        }
+    }
+    detachItemListeners() {
+        for (const record of this.itemRecords) {
+            const listeners = this.itemListeners.get(record.element);
+            if (!listeners)
+                continue;
+            record.element.removeEventListener('click', listeners.click);
+            record.element.removeEventListener('focus', listeners.focus);
+            record.element.removeEventListener('cv-treeitem-toggle', listeners.toggle);
+            this.itemListeners.delete(record.element);
+        }
+    }
+    attachItemListeners() {
+        for (const record of this.itemRecords) {
+            const click = () => {
+                this.handleItemClick(record.id);
+            };
+            const focus = () => {
+                this.handleItemFocus(record.id);
+            };
+            const toggle = (event) => {
+                event.stopPropagation();
+                this.handleItemToggle(record.id);
+            };
+            record.element.addEventListener('click', click);
+            record.element.addEventListener('focus', focus);
+            record.element.addEventListener('cv-treeitem-toggle', toggle);
+            this.itemListeners.set(record.element, { click, focus, toggle });
+        }
+    }
+    syncItemElements() {
+        const visibleIds = new Set(this.model.contracts.getVisibleNodeIds());
+        for (const record of this.itemRecords) {
+            const props = this.model.contracts.getItemProps(record.id);
+            record.element.id = props.id;
+            record.element.setAttribute('role', props.role);
+            record.element.setAttribute('tabindex', props.tabindex);
+            record.element.setAttribute('aria-level', String(props['aria-level']));
+            record.element.setAttribute('aria-posinset', String(props['aria-posinset']));
+            record.element.setAttribute('aria-setsize', String(props['aria-setsize']));
+            record.element.setAttribute('aria-selected', props['aria-selected']);
+            record.element.setAttribute('data-active', props['data-active']);
+            if (props['aria-expanded']) {
+                record.element.setAttribute('aria-expanded', props['aria-expanded']);
+            }
+            else {
+                record.element.removeAttribute('aria-expanded');
+            }
+            if (props['aria-disabled']) {
+                record.element.setAttribute('aria-disabled', props['aria-disabled']);
+            }
+            else {
+                record.element.removeAttribute('aria-disabled');
+            }
+            if (props['data-expanded']) {
+                record.element.setAttribute('data-expanded', props['data-expanded']);
+            }
+            else {
+                record.element.removeAttribute('data-expanded');
+            }
+            record.element.active = props['data-active'] === 'true';
+            record.element.selected = props['aria-selected'] === 'true';
+            record.element.expanded = props['aria-expanded'] === 'true';
+            record.element.branch = record.branch;
+            record.element.level = props['aria-level'];
+            record.element.disabled = props['aria-disabled'] === 'true';
+            record.element.hidden = !visibleIds.has(record.id);
+        }
+    }
+    syncControlledValuesFromModel() {
+        const selected = [...this.model.state.selectedIds()];
+        const expanded = [...this.model.state.expandedIds()];
+        this.values = selected;
+        this.value = selected[0] ?? '';
+        this.expandedValues = expanded;
+    }
+    setSelectedIdsInModel(ids) {
+        const deduped = [...new Set(ids.map((id) => id.trim()).filter((id) => id.length > 0))];
+        if (this.selectionMode === 'single') {
+            const id = deduped[0];
+            if (!id) {
+                this.model.actions.clearSelected();
+                return;
+            }
+            this.model.actions.select(id);
+            return;
+        }
+        const previousActiveId = this.model.state.activeId();
+        this.model.actions.clearSelected();
+        for (const id of deduped) {
+            this.model.actions.toggleSelected(id);
+        }
+        if (previousActiveId) {
+            this.model.actions.setActive(previousActiveId);
+        }
+    }
+    setExpandedIdsInModel(ids) {
+        const nextSet = new Set(ids.map((id) => id.trim()).filter((id) => id.length > 0));
+        const current = this.model.state.expandedIds();
+        for (const id of current) {
+            if (!nextSet.has(id)) {
+                this.model.actions.collapse(id);
+            }
+        }
+        for (const id of nextSet) {
+            if (!current.includes(id)) {
+                this.model.actions.expand(id);
+            }
+        }
+    }
+    captureSnapshot() {
+        return {
+            selectedIds: [...this.model.state.selectedIds()],
+            activeId: this.model.state.activeId(),
+            expandedIds: [...this.model.state.expandedIds()],
+        };
+    }
+    dispatchInput(detail) {
+        this.dispatchEvent(new CustomEvent('cv-input', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    dispatchChange(detail) {
+        this.dispatchEvent(new CustomEvent('cv-change', {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    focusActiveItem() {
+        const activeId = this.model.state.activeId();
+        if (!activeId)
+            return;
+        const activeRecord = this.itemRecords.find((record) => record.id === activeId);
+        activeRecord?.element.focus();
+    }
+    applyProgrammaticChange() {
+        this.syncItemElements();
+        this.syncControlledValuesFromModel();
+    }
+    applyInteractionResult(previous) {
+        this.syncItemElements();
+        const next = this.captureSnapshot();
+        this.syncControlledValuesFromModel();
+        const selectedChanged = !arraysEqual(previous.selectedIds, next.selectedIds);
+        const activeChanged = previous.activeId !== next.activeId;
+        const expandedChanged = !arraysEqual(previous.expandedIds, next.expandedIds);
+        if (!selectedChanged && !activeChanged && !expandedChanged)
+            return;
+        const detail = {
+            value: this.value || null,
+            values: [...this.values],
+            activeId: next.activeId,
+            expandedValues: [...this.expandedValues],
+        };
+        this.dispatchInput(detail);
+        if (selectedChanged || expandedChanged) {
+            this.dispatchChange(detail);
+        }
+        if (activeChanged) {
+            this.focusActiveItem();
+        }
+    }
+    handleItemClick(id) {
+        const previous = this.captureSnapshot();
+        this.model.actions.setActive(id);
+        if (this.selectionMode === 'multiple') {
+            this.model.actions.toggleSelected(id);
+        }
+        else {
+            this.model.actions.select(id);
+        }
+        this.applyInteractionResult(previous);
+    }
+    handleItemFocus(id) {
+        const previous = this.captureSnapshot();
+        this.model.actions.setActive(id);
+        this.applyInteractionResult(previous);
+    }
+    handleItemToggle(id) {
+        const previous = this.captureSnapshot();
+        this.model.actions.toggleExpanded(id);
+        this.applyInteractionResult(previous);
+    }
+    handleTreeKeyDown(event) {
+        if (treeviewKeysToPrevent.has(event.key)) {
+            event.preventDefault();
+        }
+        const previous = this.captureSnapshot();
+        this.model.actions.handleKeyDown({
+            key: event.key,
+            shiftKey: event.shiftKey,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            altKey: event.altKey,
+        });
+        this.applyInteractionResult(previous);
+    }
+    handleSlotChange() {
+        this.rebuildModelFromSlot(true, true);
+    }
+    render() {
+        const treeProps = this.model.contracts.getTreeProps();
+        return html `
+      <div
+        role=${treeProps.role}
+        tabindex=${treeProps.tabindex}
+        aria-label=${treeProps['aria-label'] ?? nothing}
+        aria-multiselectable=${treeProps['aria-multiselectable'] ?? nothing}
+        part="base"
+        @keydown=${this.handleTreeKeyDown}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-window-splitter.d.ts

@@ -0,0 +1,79 @@
+import { type WindowSplitterOrientation } from '@chromvoid/headless-ui/window-splitter';
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export interface CVWindowSplitterEventDetail {
+    position: number;
+}
+export declare class CVWindowSplitter extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        position: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        step: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        orientation: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        fixed: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        snap: {
+            type: StringConstructor;
+        };
+        snapThreshold: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    position: number;
+    min: number;
+    max: number;
+    step: number;
+    orientation: WindowSplitterOrientation;
+    fixed: boolean;
+    snap: string | undefined;
+    snapThreshold: number;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    private readonly idBase;
+    private model;
+    private _dragStartPosition;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private createModel;
+    private getPercentage;
+    private dispatchInput;
+    private dispatchChange;
+    private syncFromModelAndEmit;
+    private handleSeparatorKeyDown;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onLostPointerCapture;
+    protected render(): import("lit").TemplateResult<1>;
+}