@jolly-pixel/ui 1.0.1

package/dist/containers/Pane.js

@@ -0,0 +1,429 @@
+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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+// Import Third-party Dependencies
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+// Import Internal Dependencies
+import { emitContainerEvent } from "./events.js";
+import { FolderListController } from "./FolderListController.js";
+import { paneStyles } from "./Pane.styles.js";
+import { isSlotElement } from "../dom.js";
+// Registers the chevron and grip glyphs.
+import "../icon/Icon.js";
+import { LocalStorageAdapter } from "../storage/LocalStorageAdapter.js";
+import { PersistedState } from "../storage/PersistedState.js";
+import { deriveKey } from "../storage/keys.js";
+import { providePresenceSource } from "../peer/presenceContext.js";
+import { hiddenStyles } from "../theme/styles/hiddenStyles.js";
+// CONSTANTS
+const kInteractive = "button, input, select, textarea, a";
+/*
+ * A pane consumes tokens and never declares them. Declaring them would put
+ * "color-scheme: light dark" on every pane, which resets the scheme inherited
+ * from the scope host and drops a nested pane back to the system preference
+ * while everything around it stays on the chosen theme.
+ */
+let PaneElement = class PaneElement extends LitElement {
+    static styles = [
+        paneStyles,
+        hiddenStyles
+    ];
+    #managed = false;
+    #state = new PersistedState(this, {
+        isManaged: () => this.#managed,
+        namespace: () => this.#namespace(),
+        storage: () => this.storage,
+        onManagedWrite: () => {
+            emitContainerEvent(this, "jolly-layout-dirty", undefined);
+        }
+    });
+    /** True inside a container that can move the pane, lock or no lock. */
+    #hosted = false;
+    #presenceProvider = null;
+    #folders = new FolderListController(this, {
+        content: () => this._content,
+        contentSlot: () => this._contentSlot,
+        namespace: () => this.#namespace(),
+        reorderable: () => this.reorderable,
+        storage: () => this.storage,
+        announce: (message) => this.announce(message)
+    });
+    /**
+     * Identity used by the layout snapshot, falling back to tag and title.
+     */
+    get layoutKey() {
+        return this.key === "" ?
+            deriveKey("jolly-pane", this.heading) :
+            this.key;
+    }
+    constructor() {
+        super();
+        this.heading = "";
+        this.key = "";
+        this.reorderable = false;
+        this.collapsible = false;
+        this.collapsed = false;
+        this.grow = false;
+        this.dragging = false;
+        this.locked = false;
+        this.storageKey = "";
+        this.storage = new LocalStorageAdapter();
+        this.presence = null;
+        this._hasActions = false;
+        this._announcement = "";
+        this.movable = false;
+        this._grabbed = false;
+    }
+    disconnectedCallback() {
+        this.#presenceProvider?.dispose();
+        this.#presenceProvider = null;
+        super.disconnectedCallback();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.#presenceProvider = providePresenceSource(this, () => this.presence);
+        this.#managed = this.closest("jolly-dock-layout") !== null;
+        this.#hosted = this.#managed ||
+            this.closest("jolly-floating") !== null;
+        if (this.#hosted) {
+            this.movable = !this.locked;
+        }
+        if (!this.#managed) {
+            queueMicrotask(() => this.#restoreCollapsed());
+        }
+    }
+    willUpdate(changed) {
+        if (changed.has("presence")) {
+            this.#presenceProvider?.notify();
+        }
+        if (this.#hosted &&
+            changed.has("locked")) {
+            this.movable = !this.locked;
+        }
+    }
+    render() {
+        const showHeader = this.heading !== "" ||
+            this._hasActions ||
+            this.collapsible ||
+            this.movable;
+        return html `
+      ${showHeader
+            ? html `
+          <header
+            class="header"
+            part="header"
+            @pointerdown=${this.#onHeaderPointerDown}
+          >
+            ${this.collapsible
+                ? html `
+                <button
+                  class="fold"
+                  type="button"
+                  aria-expanded=${String(!this.collapsed)}
+                  aria-label=${`Fold ${this.heading || "pane"}`}
+                  @click=${this.#toggleCollapsed}
+                ><jolly-icon
+                  class="chevron"
+                  name="chevron"
+                  aria-hidden="true"
+                ></jolly-icon></button>
+              `
+                : nothing}
+            <span class="title" part="title">${this.heading}</span>
+            <span class="actions" part="actions">
+              <slot name="actions" @slotchange=${this.#onActionsChange}></slot>
+            </span>
+            ${this.movable
+                ? html `
+                <button
+                  class="grip"
+                  type="button"
+                  aria-label=${`Move ${this.heading || "pane"}`}
+                  aria-pressed=${String(this._grabbed)}
+                  @pointerdown=${this.#onGripPointerDown}
+                  @keydown=${this.#onGripKeyDown}
+                ><jolly-icon name="drag" aria-hidden="true"></jolly-icon></button>
+              `
+                : nothing}
+          </header>
+        `
+            : html `
+          <slot
+            name="actions"
+            hidden
+            @slotchange=${this.#onActionsChange}
+          ></slot>
+        `}
+      <div class="content" part="content">
+        <slot
+          @slotchange=${this.#folders.onContentChange}
+          @jolly-folder-reorder=${this.#folders.onReorderCommand}
+          @jolly-folder-drag=${this.#folders.onFolderDrag}
+        ></slot>
+      </div>
+      <span class="live-region" aria-live="polite">${this._announcement}</span>
+    `;
+    }
+    /**
+     * Speaks a message through the pane's live region.
+     */
+    announce(message) {
+        this._announcement = message;
+    }
+    folderStates() {
+        return this.#folders.states();
+    }
+    applyFolderStates(states) {
+        this.#folders.applyStates(states);
+    }
+    /**
+     * Header rect, used by a drag session for the ghost size.
+     */
+    headerRect() {
+        return (this._header ?? this).getBoundingClientRect();
+    }
+    /**
+     * Extent the pane's own content asks for along an axis, capped by its box.
+     *
+     * A dock without `align` stretches its panes, so a pane holding two rows can
+     * own six hundred pixels of dock, all but forty of them empty. A drop
+     * resolved against that box has to clear a midpoint hundreds of pixels below
+     * anything the pane draws, and the line marking the end of the dock lands at
+     * the bottom of the container rather than under the last thing in it. Read
+     * this instead and the empty tail belongs to the dock, which is where it
+     * looks like it belongs.
+     *
+     * Only the block axis packs content, so it is the only one with an extent to
+     * measure: across it a pane is simply as wide as it is given.
+     *
+     * The slotted children are what gets measured, not `scrollHeight`, which
+     * never reports below the box it is asked about and so reads a stretched
+     * pane as full whatever is in it. A pane slotted nothing at all keeps its
+     * box, since there is then nothing to say it occupies any less.
+     */
+    occupiedSize(axis) {
+        const rect = this.getBoundingClientRect();
+        if (axis === "x") {
+            return rect.width;
+        }
+        const children = this._contentSlot?.assignedElements({ flatten: true }) ?? [];
+        if (children.length === 0) {
+            return rect.height;
+        }
+        // Folded content measures nothing, and reordered children are not in
+        // document order, so the header is the floor and every child is asked.
+        let bottom = this._header?.getBoundingClientRect().bottom ?? rect.top;
+        for (const child of children) {
+            bottom = Math.max(bottom, contentBottom(child));
+        }
+        return Math.min(bottom - rect.top, rect.height);
+    }
+    #toggleCollapsed = () => {
+        this.collapsed = !this.collapsed;
+        this.#state.write("collapsed", String(this.collapsed));
+        emitContainerEvent(this, "jolly-toggle", { open: !this.collapsed });
+    };
+    #restoreCollapsed() {
+        const stored = this.#state.read("collapsed");
+        if (stored === "true" ||
+            stored === "false") {
+            this.collapsed = stored === "true";
+        }
+    }
+    #onHeaderPointerDown = (event) => {
+        if (event.button !== 0 ||
+            !this.movable ||
+            isInteractiveTarget(event)) {
+            return;
+        }
+        this.#requestDrag(event, this._header);
+    };
+    #onGripPointerDown = (event) => {
+        if (event.button !== 0 || !this.movable) {
+            return;
+        }
+        event.stopPropagation();
+        this.#requestDrag(event, event.currentTarget instanceof HTMLElement ?
+            event.currentTarget :
+            this._header);
+    };
+    /**
+     * Asks whichever container owns movement to run the session.
+     *
+     * A layout answers with dock targets; a standalone floating window answers
+     * with a move-only session. Nothing answers for a plain docked pane, which
+     * is then simply not draggable.
+     */
+    #requestDrag(event, handle) {
+        event.preventDefault();
+        emitContainerEvent(this, "jolly-pane-drag", {
+            pane: this,
+            event,
+            handle
+        });
+    }
+    #onGripKeyDown = (event) => {
+        if (event.key === " ") {
+            event.preventDefault();
+            this._grabbed = !this._grabbed;
+            this.#emitMove(this._grabbed ? "start" : "finish");
+            return;
+        }
+        if (!this._grabbed) {
+            return;
+        }
+        const commands = {
+            ArrowUp: "up",
+            ArrowDown: "down",
+            ArrowLeft: "previous",
+            ArrowRight: "next",
+            Escape: "cancel"
+        };
+        const command = commands[event.key];
+        if (command === undefined) {
+            return;
+        }
+        event.preventDefault();
+        this.#emitMove(command);
+        if (command === "cancel") {
+            this._grabbed = false;
+        }
+    };
+    #emitMove(command) {
+        emitContainerEvent(this, "jolly-pane-move", {
+            pane: this,
+            command
+        });
+    }
+    #onActionsChange = (event) => {
+        if (isSlotElement(event.currentTarget)) {
+            this._hasActions = event.currentTarget.assignedElements().length > 0;
+        }
+    };
+    #namespace() {
+        if (this.storageKey !== "") {
+            return this.storageKey;
+        }
+        const path = globalThis.location?.pathname ?? "";
+        return `${path}:jolly-pane:${this.heading || "untitled"}`;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], PaneElement.prototype, "heading", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], PaneElement.prototype, "key", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "reorderable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "grow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "dragging", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "locked", void 0);
+__decorate([
+    property({
+        type: String,
+        attribute: "storage-key"
+    }),
+    __metadata("design:type", String)
+], PaneElement.prototype, "storageKey", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], PaneElement.prototype, "storage", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], PaneElement.prototype, "presence", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "_hasActions", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], PaneElement.prototype, "_announcement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "movable", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], PaneElement.prototype, "_grabbed", void 0);
+__decorate([
+    query("slot:not([name])"),
+    __metadata("design:type", HTMLSlotElement)
+], PaneElement.prototype, "_contentSlot", void 0);
+__decorate([
+    query(".header"),
+    __metadata("design:type", HTMLElement)
+], PaneElement.prototype, "_header", void 0);
+__decorate([
+    query(".content"),
+    __metadata("design:type", HTMLElement)
+], PaneElement.prototype, "_content", void 0);
+PaneElement = __decorate([
+    customElement("jolly-pane"),
+    __metadata("design:paramtypes", [])
+], PaneElement);
+export { PaneElement };
+/**
+ * Keeps a header drag from starting on a control the header also carries.
+ */
+export function isPane(element) {
+    return element.tagName === "JOLLY-PANE";
+}
+/**
+ * Bottom edge of an element's rendered content, in client pixels.
+ *
+ * `display: contents` (`jolly-theme-preferences` among them) generates no
+ * box of its own, so `getBoundingClientRect()` on it is degenerate — always
+ * `{0, 0, 0, 0}`. Its rendered content still lives somewhere below that,
+ * either as light-DOM children or, for a custom element, inside its shadow
+ * root, so a contents host is walked instead of measured directly.
+ */
+function contentBottom(element) {
+    const rect = element.getBoundingClientRect();
+    if (getComputedStyle(element).display !== "contents") {
+        return rect.bottom;
+    }
+    let bottom = Number.NEGATIVE_INFINITY;
+    for (const child of element.shadowRoot?.children ?? element.children) {
+        bottom = Math.max(bottom, contentBottom(child));
+    }
+    return bottom === Number.NEGATIVE_INFINITY ? rect.bottom : bottom;
+}
+function isInteractiveTarget(event) {
+    const { target } = event;
+    return target instanceof Element &&
+        target.closest(kInteractive) !== null;
+}
+//# sourceMappingURL=Pane.js.map

package/dist/containers/Pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.js","sourceRoot":"","sources":["../../src/containers/Pane.ts"],"names":[],"mappings":"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"}

package/dist/containers/Pane.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const paneStyles: import("lit").CSSResult;
+//# sourceMappingURL=Pane.styles.d.ts.map

package/dist/containers/Pane.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.styles.d.ts","sourceRoot":"","sources":["../../src/containers/Pane.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,yBA0LtB,CAAC"}

package/dist/containers/Pane.styles.js

@@ -0,0 +1,193 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+// Import Internal Dependencies
+import { kFallback } from "../theme/styles/fallbacks.js";
+import { focusRing, truncate, visuallyHidden } from "../theme/styles/mixins.js";
+export const paneStyles = css `
+  /*
+   * A pane paints a plane only when it is not already inside one. A dock or a
+   * floating window nulls this out through "slotted", so a docked pane adds no
+   * second surface and, unlike before, no shadow: only detached things cast one.
+   */
+  :host {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--jolly-radius-md, 6px);
+    background: var(--jolly-surface, ${kFallback.controlBg});
+    color: var(--jolly-text, ${kFallback.text});
+    font-family: var(--jolly-font-family, ui-monospace, monospace);
+    font-size: var(--jolly-font-size, 11px);
+  }
+
+  .header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: var(--jolly-space-2, 8px);
+    min-height: var(--jolly-row-height, 20px);
+    overflow: hidden;
+    padding: var(--jolly-space-1, 4px) var(--jolly-space-2, 8px);
+    border: 0;
+    background: var(
+      --jolly-pane-header-bg,
+      ${kFallback.paneHeaderBg}
+    );
+    color: var(--jolly-text-on-fill, white);
+    user-select: none;
+  }
+
+  /* A larger left-origin checker distinguishes pane chrome from folders. */
+  .header::before {
+    position: absolute;
+    z-index: 0;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 52%;
+    background: conic-gradient(
+        from 90deg,
+        transparent 25%,
+        currentColor 0 50%,
+        transparent 0 75%,
+        currentColor 0
+      )
+      0 / 12px 12px;
+    color: var(--jolly-text-on-fill, white);
+    content: "";
+    opacity: 0.07;
+    pointer-events: none;
+    -webkit-mask-image: linear-gradient(to right, black, transparent);
+    mask-image: linear-gradient(to right, black, transparent);
+  }
+
+  /* Weight and tracking keep the title legible over the pixel pattern. */
+  .title {
+    position: relative;
+    z-index: 1;
+    flex: 1 1 auto;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    ${truncate}
+  }
+
+  :host([movable]) .header {
+    cursor: move;
+    touch-action: none;
+  }
+
+  /* The source keeps its slot while a drag previews where it would land. */
+  :host([dragging]) {
+    opacity: 0.4;
+  }
+
+  :host([collapsed]) .content {
+    display: none;
+  }
+
+  .actions {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--jolly-space-1, 4px);
+  }
+
+  .fold,
+  .grip {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--jolly-radius-sm, 3px);
+    background: none;
+    color: inherit;
+    opacity: 0.75;
+  }
+
+  .fold:hover,
+  .grip:hover {
+    background: rgb(255 255 255 / 0.15);
+    opacity: 1;
+  }
+
+  .fold:focus-visible,
+  .grip:focus-visible {
+    ${focusRing}
+    outline-offset: 1px;
+  }
+
+  .grip {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .grip[aria-pressed="true"] {
+    background: rgb(255 255 255 / 0.25);
+    opacity: 1;
+  }
+
+  .chevron {
+    transition: transform var(--jolly-duration-base, 160ms)
+      var(--jolly-easing, ease);
+  }
+
+  /*
+   * Down when open and right when shut, which is how a folder turns. The two
+   * fold the same way, so their chevrons have to point the same way too.
+   */
+  :host(:not([collapsed])) .chevron {
+    transform: rotate(90deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chevron {
+      transition: none;
+    }
+  }
+
+  .content {
+    display: flex;
+    overflow: auto;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--jolly-row-gap, 4px);
+    min-height: 0;
+    padding: var(--jolly-space-1, 4px);
+    scrollbar-color: var(--jolly-groove) transparent;
+    scrollbar-width: thin;
+  }
+
+  .content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .content::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    background: var(--jolly-groove);
+    background-clip: padding-box;
+  }
+
+  .live-region {
+    ${visuallyHidden}
+  }
+
+  @media (forced-colors: active) {
+    .header::before {
+      display: none;
+    }
+  }
+`;
+//# sourceMappingURL=Pane.styles.js.map

package/dist/containers/Pane.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pane.styles.js","sourceRoot":"","sources":["../../src/containers/Pane.styles.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EACL,SAAS,EACT,QAAQ,EACR,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;uCAeU,SAAS,CAAC,SAAS;+BAC3B,SAAS,CAAC,IAAI;;;;;;;;;;;;;;;;;QAiBrC,SAAS,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAoCxB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDR,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA0DT,cAAc;;;;;;;;CAQnB,CAAC"}

package/dist/containers/Rail.d.ts

@@ -0,0 +1,14 @@
+import { LitElement, type TemplateResult } from "lit";
+export type RailOrientation = "horizontal" | "vertical";
+export declare class Rail extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: RailOrientation;
+    constructor();
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "jolly-rail": Rail;
+    }
+}
+//# sourceMappingURL=Rail.d.ts.map

package/dist/containers/Rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rail.d.ts","sourceRoot":"","sources":["../../src/containers/Rail.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EAGV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAkBpB;IAGM,WAAW,EAAE,eAAe,CAAC;;IAQ5B,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,IAAI,CAAC;KACpB;CACF"}