@ctrliq/quantic-components 0.0.1 → 1.61.0

package/dist/splitter/index.stories.js

@@ -0,0 +1,207 @@
+import { story } from '../shared/story';
+export default {
+    title: 'Components/Layout/Splitter',
+    component: 'quantic-splitter-group',
+    tags: ['autodocs'],
+};
+const paneStyle = 'padding: 16px; font-family: sans-serif;';
+export const Basic = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group>
+        <quantic-splitter-pane>
+          <div style="${paneStyle}">Left</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Right</div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+export const Resizable = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group resizable split="30 70">
+        <quantic-splitter-pane>
+          <div style="${paneStyle}">Left (30%)</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Right (70%)</div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+export const ThreePanes = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group resizable split="25 50 25">
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Left</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Center</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Right</div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+export const Vertical = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group direction="vertical" resizable split="40 60">
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Top (40%)</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Bottom (60%)</div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+export const Nested = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group resizable split="40 60">
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Left panel</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane>
+          <quantic-splitter-group direction="vertical" resizable split="50 50">
+            <quantic-splitter-pane variant="solid">
+              <div style="${paneStyle}">Top right</div>
+            </quantic-splitter-pane>
+            <quantic-splitter-pane variant="solid">
+              <div style="${paneStyle}">Bottom right</div>
+            </quantic-splitter-pane>
+          </quantic-splitter-group>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+export const WithMinMax = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group resizable split="50 50">
+        <quantic-splitter-pane variant="solid" min-size="20" max-size="70">
+          <div style="${paneStyle}">Left (min 20%, max 70%)</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid" min-size="30">
+          <div style="${paneStyle}">Right (min 30%)</div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+// @click handler is stripped by stringHtml — extracted example shows the
+// collapsed attribute, which is how you set the initial collapsed state.
+export const Collapsed = story().render(({ html }) => {
+    let collapsed = false;
+    return html `<div style="height: 400px;">
+    <quantic-button
+      variant="outline"
+      size="small"
+      style="margin-bottom: 8px;"
+      @click=${(e) => {
+        collapsed = !collapsed;
+        const pane = e.target
+            .closest('div')
+            ?.querySelector('quantic-splitter-pane');
+        if (pane)
+            pane.toggleAttribute('collapsed', collapsed);
+    }}
+    >
+      Toggle left pane
+    </quantic-button>
+    <quantic-splitter-group resizable split="30 70">
+      <quantic-splitter-pane variant="solid">
+        <div style=${paneStyle}>Left (collapsible)</div>
+      </quantic-splitter-pane>
+      <quantic-splitter-pane variant="solid">
+        <div style=${paneStyle}>Right</div>
+      </quantic-splitter-pane>
+    </quantic-splitter-group>
+  </div>`;
+});
+export const CardGroupAndForm = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group resizable split="50 50">
+        <quantic-splitter-pane>
+          <div style="${paneStyle}">
+            <quantic-card-group>
+              <quantic-card variant="solid">
+                <quantic-card-title slot="header">Alice Johnson</quantic-card-title>
+                Product Designer · San Francisco
+              </quantic-card>
+              <quantic-card variant="solid">
+                <quantic-card-title slot="header">Bob Martinez</quantic-card-title>
+                Frontend Engineer · New York
+              </quantic-card>
+              <quantic-card variant="solid">
+                <quantic-card-title slot="header">Clara Lee</quantic-card-title>
+                Engineering Manager · London
+              </quantic-card>
+              <quantic-card variant="solid">
+                <quantic-card-title slot="header">David Kim</quantic-card-title>
+                Backend Engineer · Seoul
+              </quantic-card>
+            </quantic-card-group>
+          </div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane>
+          <div style="${paneStyle}">
+            <quantic-field-group>
+              <quantic-text-field label="Full Name" placeholder="Enter full name" required></quantic-text-field>
+              <quantic-text-field label="Email" type="email" placeholder="Enter email address" hint="We'll never share your email" required></quantic-text-field>
+              <quantic-select-field name="role" label="Role" placeholder="Select a role">
+                <option value="designer">Product Designer</option>
+                <option value="frontend">Frontend Engineer</option>
+                <option value="backend">Backend Engineer</option>
+                <option value="manager">Engineering Manager</option>
+              </quantic-select-field>
+              <quantic-select-field name="location" label="Location" placeholder="Select a location">
+                <option value="sf">San Francisco</option>
+                <option value="ny">New York</option>
+                <option value="london">London</option>
+                <option value="seoul">Seoul</option>
+              </quantic-select-field>
+            </quantic-field-group>
+          </div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);
+export const CollapsedNoBorder = story().render(({ html }) => {
+    let collapsed = false;
+    return html `<div style="height: 400px;">
+    <quantic-button
+      variant="outline"
+      size="small"
+      style="margin-bottom: 8px;"
+      @click=${(e) => {
+        collapsed = !collapsed;
+        const pane = e.target
+            .closest('div')
+            ?.querySelector('quantic-splitter-pane');
+        if (pane)
+            pane.toggleAttribute('collapsed', collapsed);
+    }}
+    >
+      Toggle left pane
+    </quantic-button>
+    <quantic-splitter-group resizable split="30 70">
+      <quantic-splitter-pane collapsed variant="solid">
+        <div style=${paneStyle}>Left (collapsed — no border)</div>
+      </quantic-splitter-pane>
+      <quantic-splitter-pane variant="solid">
+        <div style=${paneStyle}>Right</div>
+      </quantic-splitter-pane>
+    </quantic-splitter-group>
+  </div>`;
+});
+export const ExplicitFluidSplit = story().render(() => `
+    <div style="height: 400px;">
+      <quantic-splitter-group resizable split="* 30%">
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Fluid (split *)</div>
+        </quantic-splitter-pane>
+        <quantic-splitter-pane variant="solid">
+          <div style="${paneStyle}">Explicit (split 30%)</div>
+        </quantic-splitter-pane>
+      </quantic-splitter-group>
+    </div>
+  `);

package/dist/splitter/splitter-group.component.d.ts

@@ -0,0 +1,35 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class SplitterGroup extends QuanticElement {
+    static meta: ComponentMeta;
+    direction: 'horizontal' | 'vertical';
+    resizable: boolean;
+    split: string;
+    collapseBelow: string;
+    private wrapper;
+    private panes;
+    private sizes;
+    private mutationObserver;
+    private collapsedObserver;
+    private resizeObserver;
+    private dragInfo;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private discoverPanes;
+    private setupCollapsedObserver;
+    private setupResizeObserver;
+    private checkStacked;
+    private checkStackedForSize;
+    private applySizes;
+    private dividerEffectiveBounds;
+    private isDividerDisabled;
+    private isDividerHidden;
+    private handleDividerPointerDown;
+    private handlePointerMove;
+    private handleDividerKeyDown;
+    private handlePointerUp;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/splitter/splitter-group.component.js

@@ -0,0 +1,407 @@
+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 { css, html, nothing } from 'lit';
+import { query, state } from 'lit/decorators.js';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+import { activeSizesSum, computeLayoutSizes, constrainPair, keyToDelta, layoutToSize, paneBounds, parseSplit, } from './splitter.utils';
+import { classMap } from 'lit/directives/class-map.js';
+let SplitterGroup = class SplitterGroup extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.direction = 'horizontal';
+        this.resizable = false;
+        this.split = '';
+        this.collapseBelow = '640px';
+        this.panes = [];
+        this.sizes = [];
+        this.mutationObserver = null;
+        this.collapsedObserver = null;
+        this.resizeObserver = null;
+        this.dragInfo = null;
+        this.handlePointerMove = (e) => {
+            if (!this.dragInfo)
+                return;
+            const containerSize = this.direction === 'vertical'
+                ? this.wrapper.clientHeight
+                : this.wrapper.clientWidth;
+            if (containerSize === 0)
+                return;
+            const { dividerIndex, startX, startY, startLayoutA, startLayoutB } = this.dragInfo;
+            const paneA = this.panes[dividerIndex - 1];
+            const paneB = this.panes[dividerIndex];
+            const deltaPixels = this.direction === 'vertical' ? e.clientY - startY : e.clientX - startX;
+            const delta = (deltaPixels / containerSize) * 100;
+            const [newA, newB] = constrainPair(startLayoutA, delta, {
+                a: paneBounds(paneA),
+                b: paneBounds(paneB),
+                total: startLayoutA + startLayoutB,
+            });
+            const newSizes = [...this.sizes];
+            newSizes[dividerIndex - 1] = layoutToSize(newA, this.dragInfo.activeSizesSum);
+            newSizes[dividerIndex] = layoutToSize(newB, this.dragInfo.activeSizesSum);
+            this.sizes = newSizes;
+            this.applySizes();
+        };
+        this.handlePointerUp = () => {
+            if (!this.dragInfo)
+                return;
+            this.renderRoot
+                .querySelectorAll('.divider.dragging')
+                .forEach((d) => {
+                d.classList.remove('dragging');
+            });
+            this.removeEventListener('pointermove', this.handlePointerMove);
+            this.removeEventListener('pointerup', this.handlePointerUp);
+            this.removeEventListener('pointercancel', this.handlePointerUp);
+            this.dragInfo = null;
+            this.dispatchEvent(new CustomEvent('resize', {
+                bubbles: true,
+                composed: true,
+                detail: { sizes: this.sizes },
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.discoverPanes();
+        this.mutationObserver = new MutationObserver(() => this.discoverPanes());
+        this.mutationObserver.observe(this, { childList: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.mutationObserver?.disconnect();
+        this.collapsedObserver?.disconnect();
+        this.resizeObserver?.disconnect();
+        if (this.dragInfo) {
+            this.removeEventListener('pointermove', this.handlePointerMove);
+            this.removeEventListener('pointerup', this.handlePointerUp);
+            this.removeEventListener('pointercancel', this.handlePointerUp);
+            this.dragInfo = null;
+        }
+    }
+    firstUpdated() {
+        this.setupResizeObserver();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('split') && !changed.has('panes')) {
+            this.sizes = parseSplit(this.split, this.panes.length);
+            this.applySizes();
+        }
+        if (changed.has('collapseBelow')) {
+            this.checkStacked();
+        }
+    }
+    discoverPanes() {
+        const panes = Array.from(this.querySelectorAll(':scope > quantic-splitter-pane'));
+        panes.forEach((pane, i) => {
+            const slotName = `pane-${i}`;
+            if (pane.getAttribute('slot') !== slotName) {
+                pane.setAttribute('slot', slotName);
+            }
+        });
+        this.panes.forEach((pane) => {
+            if (!panes.includes(pane)) {
+                pane.removeAttribute('slot');
+                pane.removeAttribute('stacked');
+            }
+        });
+        const prevCount = this.panes.length;
+        this.panes = panes;
+        if (panes.length !== prevCount) {
+            this.sizes = parseSplit(this.split, panes.length);
+        }
+        this.setupCollapsedObserver();
+        this.applySizes();
+    }
+    setupCollapsedObserver() {
+        this.collapsedObserver?.disconnect();
+        if (this.panes.length === 0)
+            return;
+        this.collapsedObserver = new MutationObserver(() => {
+            this.panes = [...this.panes];
+            this.applySizes();
+        });
+        this.panes.forEach((pane) => {
+            this.collapsedObserver.observe(pane, {
+                attributes: true,
+                attributeFilter: ['collapsed'],
+            });
+        });
+    }
+    setupResizeObserver() {
+        if (!this.wrapper)
+            return;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            this.checkStackedForSize(entry.contentRect.width);
+        });
+        this.resizeObserver.observe(this.wrapper);
+    }
+    checkStacked() {
+        if (this.wrapper) {
+            this.checkStackedForSize(this.wrapper.clientWidth);
+        }
+    }
+    checkStackedForSize(width) {
+        if (this.direction === 'vertical')
+            return;
+        const raw = (this.collapseBelow ?? '').trim();
+        if (!raw.endsWith('px'))
+            return;
+        const threshold = parseFloat(raw);
+        if (!Number.isFinite(threshold))
+            return;
+        const stacked = width <= threshold;
+        this.toggleAttribute('stacked', stacked);
+        this.panes.forEach((pane) => pane.toggleAttribute('stacked', stacked));
+    }
+    applySizes() {
+        const layout = computeLayoutSizes(this.sizes, this.panes);
+        this.panes.forEach((pane, i) => {
+            pane.style.setProperty('--quantic-component-splitter-pane-flex-grow', String(layout[i]));
+        });
+        this.renderRoot
+            .querySelectorAll('[part="divider"]')
+            .forEach((divider, idx) => {
+            divider.setAttribute('aria-valuenow', String(Math.round(layout[idx])));
+        });
+    }
+    dividerEffectiveBounds(paneIndex, layout) {
+        const a = paneBounds(this.panes[paneIndex - 1]);
+        const b = paneBounds(this.panes[paneIndex]);
+        const total = layout[paneIndex - 1] + layout[paneIndex];
+        return {
+            min: Math.max(a.min, total - b.max),
+            max: Math.min(a.max, total - b.min),
+        };
+    }
+    isDividerDisabled(paneIndex) {
+        return (!this.resizable ||
+            (this.panes[paneIndex - 1]?.collapsed ?? false) ||
+            (this.panes[paneIndex]?.collapsed ?? false));
+    }
+    isDividerHidden(paneIndex) {
+        return ((this.panes[paneIndex - 1]?.hasAttribute('collapsed') ?? false) ||
+            (this.panes[paneIndex]?.hasAttribute('collapsed') ?? false));
+    }
+    handleDividerPointerDown(e, paneIndex) {
+        e.preventDefault();
+        const divider = e.currentTarget;
+        divider.setPointerCapture(e.pointerId);
+        divider.classList.add('dragging');
+        const layout = computeLayoutSizes(this.sizes, this.panes);
+        const sum = activeSizesSum(this.sizes, this.panes);
+        this.dragInfo = {
+            dividerIndex: paneIndex,
+            startX: e.clientX,
+            startY: e.clientY,
+            startLayoutA: layout[paneIndex - 1],
+            startLayoutB: layout[paneIndex],
+            activeSizesSum: sum,
+        };
+        this.addEventListener('pointermove', this.handlePointerMove);
+        this.addEventListener('pointerup', this.handlePointerUp);
+        this.addEventListener('pointercancel', this.handlePointerUp);
+    }
+    handleDividerKeyDown(e, paneIndex) {
+        const delta = keyToDelta(e.key, this.direction === 'vertical');
+        if (delta === null)
+            return;
+        e.preventDefault();
+        const layout = computeLayoutSizes(this.sizes, this.panes);
+        const [newA, newB] = constrainPair(layout[paneIndex - 1], delta, {
+            a: paneBounds(this.panes[paneIndex - 1]),
+            b: paneBounds(this.panes[paneIndex]),
+            total: layout[paneIndex - 1] + layout[paneIndex],
+        });
+        const sum = activeSizesSum(this.sizes, this.panes);
+        const newSizes = [...this.sizes];
+        newSizes[paneIndex - 1] = layoutToSize(newA, sum);
+        newSizes[paneIndex] = layoutToSize(newB, sum);
+        this.sizes = newSizes;
+        this.applySizes();
+        this.dispatchEvent(new CustomEvent('resize', {
+            bubbles: true,
+            composed: true,
+            detail: { sizes: this.sizes },
+        }));
+    }
+    render() {
+        const layout = computeLayoutSizes(this.sizes, this.panes);
+        return html `
+      <div
+        class=${classMap({
+            wrapper: true,
+            'direction--horizontal': this.direction === 'horizontal',
+            'direction--vertical': this.direction === 'vertical',
+        })}
+      >
+        ${this.panes.map((_, i) => {
+            const db = i > 0 ? this.dividerEffectiveBounds(i, layout) : null;
+            return html `${i > 0 && !this.isDividerHidden(i)
+                ? html `<div
+                  class=${classMap({
+                    divider: true,
+                    disabled: this.isDividerDisabled(i),
+                })}
+                  part="divider"
+                  role="separator"
+                  tabindex=${this.isDividerDisabled(i) ? nothing : '0'}
+                  aria-orientation=${this.direction === 'vertical'
+                    ? 'horizontal'
+                    : 'vertical'}
+                  aria-valuenow=${Math.round(layout[i - 1])}
+                  aria-valuemin=${Math.round(db.min)}
+                  aria-valuemax=${Math.round(db.max)}
+                  @pointerdown=${(e) => this.handleDividerPointerDown(e, i)}
+                  @keydown=${(e) => this.handleDividerKeyDown(e, i)}
+                ></div>`
+                : nothing}<slot name="pane-${i}"></slot>`;
+        })}
+      </div>
+    `;
+    }
+};
+SplitterGroup.meta = {
+    tag: 'quantic-splitter-group',
+    description: 'Resizable panel container — renders two or more panes separated by draggable dividers. ' +
+        'Collapses to a stacked layout below the collapse-below breakpoint.',
+    category: 'layout',
+    slots: { '': { description: 'Two or more quantic-splitter-pane elements.' } },
+    subComponents: ['quantic-splitter-pane'],
+};
+SplitterGroup.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      container-type: inline-size;
+    }
+
+    :host([stacked]) .wrapper {
+      flex-direction: column;
+      overflow-y: auto;
+    }
+
+    .wrapper {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .wrapper.direction--horizontal {
+      flex-direction: row;
+    }
+
+    .direction--horizontal .divider:not(.disabled) {
+      cursor: col-resize;
+    }
+
+    .wrapper.direction--vertical {
+      flex-direction: column;
+    }
+
+    .direction--vertical .divider:not(.disabled) {
+      cursor: row-resize;
+    }
+
+    .divider {
+      flex: 0 0 1px;
+      position: relative;
+      z-index: 1;
+      touch-action: none;
+      user-select: none;
+      background: var(--quantic-border-primary);
+      transition: background 0.15s ease-in-out;
+    }
+
+    .divider::before {
+      content: '';
+      position: absolute;
+      inset: -6px;
+      background: transparent;
+    }
+
+    .divider::after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      background: transparent;
+      transition:
+        background 0.15s ease-in-out,
+        width 0.15s ease-in-out,
+        height 0.15s ease-in-out;
+    }
+
+    .direction--horizontal .divider::after {
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .direction--vertical .divider::after {
+      left: 0;
+      right: 0;
+      height: 1px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .direction--horizontal .divider:hover::after,
+    .direction--horizontal .divider.dragging::after {
+      width: 4px;
+      background: var(--quantic-fg-brand-primary);
+    }
+
+    .direction--vertical .divider:hover::after,
+    .direction--vertical .divider.dragging::after {
+      height: 4px;
+      background: var(--quantic-fg-brand-primary);
+    }
+
+    .divider.disabled {
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .divider.disabled::after {
+      display: none;
+    }
+
+    :host([stacked]) .divider {
+      display: none;
+    }
+  `;
+__decorate([
+    prop({ type: '"horizontal" | "vertical"', default: 'horizontal', description: 'Axis along which panes are split.' })
+], SplitterGroup.prototype, "direction", void 0);
+__decorate([
+    prop({ type: 'boolean', default: 'false', reflect: true, description: 'Enables draggable dividers for interactive resizing.' })
+], SplitterGroup.prototype, "resizable", void 0);
+__decorate([
+    prop({ type: 'string', description: 'Comma-separated initial size percentages, e.g. "30,70". Equal split when omitted.' })
+], SplitterGroup.prototype, "split", void 0);
+__decorate([
+    prop({ attribute: 'collapse-below', type: 'string', default: '640px', description: 'Pixel breakpoint below which panes stack vertically instead of side-by-side.' })
+], SplitterGroup.prototype, "collapseBelow", void 0);
+__decorate([
+    query('.wrapper')
+], SplitterGroup.prototype, "wrapper", void 0);
+__decorate([
+    state()
+], SplitterGroup.prototype, "panes", void 0);
+SplitterGroup = __decorate([
+    quanticElement('quantic-splitter-group')
+], SplitterGroup);
+export { SplitterGroup };

package/dist/splitter/splitter-pane.component.d.ts

@@ -0,0 +1,11 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class SplitterPane extends QuanticElement {
+    static meta: ComponentMeta;
+    collapsed: boolean;
+    minSize: number;
+    maxSize: number;
+    variant: 'default' | 'solid';
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}