@deepfuture/dui-components 0.0.1

package/sidebar/sidebar-provider.js

@@ -0,0 +1,157 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+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, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const openChangeEvent = customEvent("open-change", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+`;
+/**
+ * `<dui-sidebar-provider>` — Root state manager for the sidebar compound component.
+ *
+ * Manages open/close state, mobile detection, and provides context to all
+ * sidebar sub-components. Wraps the entire layout (sidebar + main content).
+ *
+ * @slot - Default slot for sidebar and content areas.
+ * @fires open-change - Fired when the sidebar opens or closes. Detail: { open: boolean }
+ */
+export class DuiSidebarProvider extends LitElement {
+    static { this.tagName = "dui-sidebar-provider"; }
+    static { this.styles = [base, styles]; }
+    #open_accessor_storage = undefined;
+    /** Controls the sidebar open state (controlled mode). */
+    get open() { return this.#open_accessor_storage; }
+    set open(value) { this.#open_accessor_storage = value; }
+    #defaultOpen_accessor_storage = true;
+    /** Initial open state for uncontrolled mode. Defaults to true. */
+    get defaultOpen() { return this.#defaultOpen_accessor_storage; }
+    set defaultOpen(value) { this.#defaultOpen_accessor_storage = value; }
+    #side_accessor_storage = "left";
+    /** Which side the sidebar appears on. */
+    get side() { return this.#side_accessor_storage; }
+    set side(value) { this.#side_accessor_storage = value; }
+    #variant_accessor_storage = "sidebar";
+    /** Visual variant of the sidebar. */
+    get variant() { return this.#variant_accessor_storage; }
+    set variant(value) { this.#variant_accessor_storage = value; }
+    #collapsible_accessor_storage = "offcanvas";
+    /** How the sidebar collapses. */
+    get collapsible() { return this.#collapsible_accessor_storage; }
+    set collapsible(value) { this.#collapsible_accessor_storage = value; }
+    #internalOpen_accessor_storage = true;
+    get #internalOpen() { return this.#internalOpen_accessor_storage; }
+    set #internalOpen(value) { this.#internalOpen_accessor_storage = value; }
+    #openMobile_accessor_storage = false;
+    get #openMobile() { return this.#openMobile_accessor_storage; }
+    set #openMobile(value) { this.#openMobile_accessor_storage = value; }
+    #isMobile_accessor_storage = false;
+    get #isMobile() { return this.#isMobile_accessor_storage; }
+    set #isMobile(value) { this.#isMobile_accessor_storage = value; }
+    #mediaQuery;
+    #boundOnMediaChange;
+    #boundOnKeyDown;
+    get #isOpen() {
+        return this.open ?? this.#internalOpen;
+    }
+    #setOpen = (value) => {
+        if (this.#isMobile) {
+            this.#openMobile = value;
+        }
+        else {
+            if (this.open === undefined) {
+                this.#internalOpen = value;
+            }
+            this.dispatchEvent(openChangeEvent({ open: value }));
+        }
+    };
+    #toggleSidebar = () => {
+        if (this.#isMobile) {
+            this.#openMobile = !this.#openMobile;
+        }
+        else {
+            this.#setOpen(!this.#isOpen);
+        }
+    };
+    #onMediaChange = (e) => {
+        this.#isMobile = !e.matches;
+        if (!this.#isMobile) {
+            this.#openMobile = false;
+        }
+    };
+    #onKeyDown = (e) => {
+        if (e.key === "b" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this.#toggleSidebar();
+        }
+    };
+    #ctx_accessor_storage = this.#buildContext();
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            state: this.#isOpen ? "expanded" : "collapsed",
+            open: this.#isOpen,
+            openMobile: this.#openMobile,
+            isMobile: this.#isMobile,
+            side: this.side,
+            variant: this.variant,
+            collapsible: this.collapsible,
+            setOpen: this.#setOpen,
+            toggleSidebar: this.#toggleSidebar,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.open === undefined) {
+            this.#internalOpen = this.defaultOpen;
+        }
+        this.#mediaQuery = matchMedia("(min-width: 768px)");
+        this.#isMobile = !this.#mediaQuery.matches;
+        this.#boundOnMediaChange = this.#onMediaChange.bind(this);
+        this.#mediaQuery.addEventListener("change", this.#boundOnMediaChange);
+        this.#boundOnKeyDown = this.#onKeyDown.bind(this);
+        document.addEventListener("keydown", this.#boundOnKeyDown);
+        this.#ctx = this.#buildContext();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#mediaQuery && this.#boundOnMediaChange) {
+            this.#mediaQuery.removeEventListener("change", this.#boundOnMediaChange);
+        }
+        if (this.#boundOnKeyDown) {
+            document.removeEventListener("keydown", this.#boundOnKeyDown);
+        }
+    }
+    willUpdate() {
+        this.#ctx = this.#buildContext();
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], DuiSidebarProvider.prototype, "open", null);
+__decorate([
+    property({ type: Boolean, attribute: "default-open" })
+], DuiSidebarProvider.prototype, "defaultOpen", null);
+__decorate([
+    property({ reflect: true })
+], DuiSidebarProvider.prototype, "side", null);
+__decorate([
+    property({ reflect: true })
+], DuiSidebarProvider.prototype, "variant", null);
+__decorate([
+    property({ reflect: true })
+], DuiSidebarProvider.prototype, "collapsible", null);

package/sidebar/sidebar-separator.d.ts

@@ -0,0 +1,12 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-separator>` — Visual divider within the sidebar.
+ *
+ * Renders a horizontal rule with `role="separator"`.
+ */
+export declare class DuiSidebarSeparator extends LitElement {
+    static tagName: "dui-sidebar-separator";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-separator.js

@@ -0,0 +1,24 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  .Separator {
+    /* Structural only — height and color from theme */
+  }
+`;
+/**
+ * `<dui-sidebar-separator>` — Visual divider within the sidebar.
+ *
+ * Renders a horizontal rule with `role="separator"`.
+ */
+export class DuiSidebarSeparator extends LitElement {
+    static { this.tagName = "dui-sidebar-separator"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `<div class="Separator" role="separator"></div>`;
+    }
+}

package/sidebar/sidebar-trigger.d.ts

@@ -0,0 +1,16 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar-trigger>` — Toggle button for the sidebar.
+ *
+ * Consumes sidebar context and calls `toggleSidebar()` on click.
+ * Renders a ghost button with a default panel icon.
+ *
+ * @slot - Override the default icon.
+ */
+export declare class DuiSidebarTrigger extends LitElement {
+    #private;
+    static tagName: "dui-sidebar-trigger";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/sidebar/sidebar-trigger.js

@@ -0,0 +1,50 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { sidebarContext } from "./sidebar-context.js";
+const styles = css `
+  :host {
+    display: inline-block;
+  }
+`;
+// Inline panel-left SVG
+const panelLeftSvg = html `<svg
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M9 3v18" />
+</svg>`;
+/**
+ * `<dui-sidebar-trigger>` — Toggle button for the sidebar.
+ *
+ * Consumes sidebar context and calls `toggleSidebar()` on click.
+ * Renders a ghost button with a default panel icon.
+ *
+ * @slot - Override the default icon.
+ */
+export class DuiSidebarTrigger extends LitElement {
+    static { this.tagName = "dui-sidebar-trigger"; }
+    static { this.styles = [base, styles]; }
+    #ctx = new ContextConsumer(this, {
+        context: sidebarContext,
+        subscribe: true,
+    });
+    #onClick = () => {
+        this.#ctx.value?.toggleSidebar();
+    };
+    render() {
+        return html `
+      <dui-button variant="ghost" size="sm" @click=${this.#onClick}>
+        <slot>
+          <dui-icon>${panelLeftSvg}</dui-icon>
+        </slot>
+      </dui-button>
+    `;
+    }
+}

package/sidebar/sidebar.d.ts

@@ -0,0 +1,21 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-sidebar>` — Main sidebar container.
+ *
+ * Consumes sidebar context and renders the appropriate desktop or mobile layout.
+ * Desktop uses a width-transitioning wrapper; mobile uses a backdrop + sliding panel.
+ *
+ * @slot - Default slot for sidebar content (header, content, footer, etc.).
+ * @csspart desktop-outer - The outer desktop wrapper that transitions width.
+ * @csspart desktop-inner - The inner desktop container with content.
+ * @csspart backdrop - The mobile backdrop overlay.
+ * @csspart mobile-panel - The sliding mobile panel.
+ */
+export declare class DuiSidebar extends LitElement {
+    #private;
+    static tagName: "dui-sidebar";
+    static styles: import("lit").CSSResult[];
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/sidebar/sidebar.js

@@ -0,0 +1,228 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
+import { css, html, LitElement } from "lit";
+import { ContextConsumer } from "@lit/context";
+import { base } from "@deepfuture/dui-core/base";
+import { sidebarContext } from "./sidebar-context.js";
+const styles = css `
+  :host {
+    display: block;
+    flex-shrink: 0;
+    height: 100%;
+  }
+
+  .DesktopOuter {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    transition-property: width;
+  }
+
+  .DesktopInner {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  :host([data-side="left"]) .DesktopInner {
+    left: 0;
+  }
+
+  :host([data-side="right"]) .DesktopInner {
+    right: 0;
+  }
+
+  :host([data-collapsible="offcanvas"][data-state="collapsed"][data-side="left"])
+    .DesktopInner {
+    left: calc(-1 * var(--sidebar-width));
+  }
+
+  :host([data-collapsible="offcanvas"][data-state="collapsed"][data-side="right"])
+    .DesktopInner {
+    right: calc(-1 * var(--sidebar-width));
+  }
+
+  :host([data-variant="floating"]) .DesktopInner,
+  :host([data-variant="inset"]) .DesktopInner {
+    top: 0;
+    bottom: 0;
+  }
+
+  :host([data-collapsible="icon"][data-state="collapsed"]) .DesktopInner {
+    overflow: hidden;
+  }
+
+  .Backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    transition-property: opacity;
+  }
+
+  .MobilePanel {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    transition-property: transform;
+  }
+
+  :host([data-side="left"]) .MobilePanel {
+    left: 0;
+  }
+
+  :host([data-side="right"]) .MobilePanel {
+    right: 0;
+  }
+
+  .MobilePanel[data-starting-style] {
+    transform: translateX(var(--mobile-start-x));
+  }
+
+  .MobilePanel[data-ending-style] {
+    transform: translateX(var(--mobile-end-x));
+  }
+`;
+/**
+ * `<dui-sidebar>` — Main sidebar container.
+ *
+ * Consumes sidebar context and renders the appropriate desktop or mobile layout.
+ * Desktop uses a width-transitioning wrapper; mobile uses a backdrop + sliding panel.
+ *
+ * @slot - Default slot for sidebar content (header, content, footer, etc.).
+ * @csspart desktop-outer - The outer desktop wrapper that transitions width.
+ * @csspart desktop-inner - The inner desktop container with content.
+ * @csspart backdrop - The mobile backdrop overlay.
+ * @csspart mobile-panel - The sliding mobile panel.
+ */
+export class DuiSidebar extends LitElement {
+    static { this.tagName = "dui-sidebar"; }
+    static { this.styles = [base, styles]; }
+    #mounted_accessor_storage = false;
+    get #mounted() { return this.#mounted_accessor_storage; }
+    set #mounted(value) { this.#mounted_accessor_storage = value; }
+    #startingStyle_accessor_storage = false;
+    get #startingStyle() { return this.#startingStyle_accessor_storage; }
+    set #startingStyle(value) { this.#startingStyle_accessor_storage = value; }
+    #endingStyle_accessor_storage = false;
+    get #endingStyle() { return this.#endingStyle_accessor_storage; }
+    set #endingStyle(value) { this.#endingStyle_accessor_storage = value; }
+    #ctx = new ContextConsumer(this, {
+        context: sidebarContext,
+        subscribe: true,
+    });
+    willUpdate() {
+        const ctx = this.#ctx.value;
+        if (!ctx)
+            return;
+        this.dataset.state = ctx.state;
+        this.dataset.side = ctx.side;
+        this.dataset.variant = ctx.variant;
+        this.dataset.collapsible = ctx.collapsible;
+        // Handle mobile panel animation
+        if (ctx.isMobile) {
+            if (ctx.openMobile && !this.#mounted) {
+                this.#animateOpen();
+            }
+            else if (!ctx.openMobile && this.#mounted && !this.#endingStyle) {
+                this.#animateClose();
+            }
+        }
+    }
+    async #animateOpen() {
+        this.#mounted = true;
+        this.#startingStyle = true;
+        await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+        this.#startingStyle = false;
+    }
+    #animateClose() {
+        this.#endingStyle = true;
+        const panel = this.shadowRoot?.querySelector(".MobilePanel");
+        if (!panel) {
+            this.#finishClose();
+            return;
+        }
+        let called = false;
+        const done = () => {
+            if (called)
+                return;
+            called = true;
+            panel.removeEventListener("transitionend", onEnd);
+            clearTimeout(timer);
+            this.#finishClose();
+        };
+        const onEnd = () => {
+            done();
+        };
+        panel.addEventListener("transitionend", onEnd);
+        const timer = setTimeout(done, 250);
+    }
+    #finishClose() {
+        this.#endingStyle = false;
+        this.#mounted = false;
+    }
+    #onBackdropClick = () => {
+        this.#ctx.value?.setOpen(false);
+    };
+    #onMobileKeyDown = (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            this.#ctx.value?.setOpen(false);
+        }
+    };
+    render() {
+        const ctx = this.#ctx.value;
+        if (!ctx)
+            return html ``;
+        const side = ctx.side;
+        const startX = side === "left" ? "-100%" : "100%";
+        if (ctx.isMobile) {
+            if (!this.#mounted)
+                return html ``;
+            return html `
+        <div
+          class="Backdrop"
+          part="backdrop"
+          ?data-starting-style=${this.#startingStyle}
+          ?data-ending-style=${this.#endingStyle}
+          @click=${this.#onBackdropClick}
+        ></div>
+        <div
+          class="MobilePanel"
+          part="mobile-panel"
+          role="dialog"
+          tabindex="-1"
+          style="--mobile-start-x: ${startX}; --mobile-end-x: ${startX}"
+          ?data-starting-style=${this.#startingStyle}
+          ?data-ending-style=${this.#endingStyle}
+          @keydown=${this.#onMobileKeyDown}
+        >
+          <slot></slot>
+        </div>
+      `;
+        }
+        if (ctx.collapsible === "none") {
+            return html `
+        <div class="DesktopOuter" part="desktop-outer">
+          <div class="DesktopInner" part="desktop-inner">
+            <slot></slot>
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <div class="DesktopOuter" part="desktop-outer">
+        <div class="DesktopInner" part="desktop-inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}

package/slider/index.d.ts

@@ -0,0 +1 @@
+export { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";

package/slider/index.js

@@ -0,0 +1 @@
+export { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";

package/slider/register.d.ts

@@ -0,0 +1 @@
+export {};

package/slider/register.js

@@ -0,0 +1,4 @@
+import { DuiSlider } from "./slider.js";
+if (!customElements.get(DuiSlider.tagName)) {
+    customElements.define(DuiSlider.tagName, DuiSlider);
+}

package/slider/slider.d.ts

@@ -0,0 +1,37 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/slider */
+import { LitElement, type TemplateResult } from "lit";
+export declare const valueChangeEvent: (detail: {
+    value: number;
+}) => CustomEvent<{
+    value: number;
+}>;
+export declare const valueCommittedEvent: (detail: {
+    value: number;
+}) => CustomEvent<{
+    value: number;
+}>;
+/**
+ * A slider for selecting numeric values within a range.
+ *
+ * Supports pointer drag, keyboard navigation (arrows, Page Up/Down, Home/End),
+ * and a hidden native range input for accessibility.
+ */
+export declare class DuiSlider extends LitElement {
+    #private;
+    static tagName: "dui-slider";
+    static styles: import("lit").CSSResult[];
+    /** Current value. */
+    accessor value: number;
+    /** Minimum value. */
+    accessor min: number;
+    /** Maximum value. */
+    accessor max: number;
+    /** Step increment. */
+    accessor step: number;
+    /** Whether the slider is disabled. */
+    accessor disabled: boolean;
+    /** Name for form submission. */
+    accessor name: string;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}