@threadlabs/looma 0.1.7 → 0.1.8

package/layout/index.cjs

@@ -176,7 +176,24 @@ if (typeof HTMLElement !== "undefined") {
   }
   class UISidebarElement extends UILayoutElement {
     static get observedAttributes() {
-      return ["gap", "side", "width", "align"];
+      return ["gap", "side", "width", "align", "resizable", "storage-key", "min-width", "max-width", "resize-step", "resize-label"];
+    }
+    resizeHandle = null;
+    resizeAbort = null;
+    pointerAbort = null;
+    connectedCallback() {
+      this.syncResizable();
+    }
+    disconnectedCallback() {
+      this.resizeAbort?.abort();
+      this.resizeAbort = null;
+      this.pointerAbort?.abort();
+      this.pointerAbort = null;
+    }
+    attributeChangedCallback(name) {
+      if (["resizable", "storage-key", "min-width", "max-width", "resize-step", "resize-label", "side", "width"].includes(name)) {
+        this.syncResizable();
+      }
     }
     get gap() {
       return this.getPrimitiveAttribute("gap");
@@ -202,6 +219,128 @@ if (typeof HTMLElement !== "undefined") {
     set align(value) {
       this.setPrimitiveAttribute("align", value);
     }
+    get resizable() {
+      return this.hasAttribute("resizable");
+    }
+    set resizable(value) {
+      this.toggleAttribute("resizable", value);
+    }
+    numericAttribute(name, fallback) {
+      const parsed = Number(this.getAttribute(name));
+      return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+    }
+    bounds() {
+      const min = this.numericAttribute("min-width", 176);
+      const max = Math.max(min, this.numericAttribute("max-width", 480));
+      return { min, max, step: this.numericAttribute("resize-step", 16) };
+    }
+    defaultWidth() {
+      if (this.width === "narrow") return 224;
+      if (this.width === "wide") return 384;
+      return 288;
+    }
+    storageId() {
+      const key = this.getAttribute("storage-key")?.trim();
+      return key ? `looma:sidebar-width:${key}` : null;
+    }
+    readStoredWidth() {
+      const key = this.storageId();
+      if (!key || typeof localStorage === "undefined") return null;
+      try {
+        const parsed = Number(localStorage.getItem(key));
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+      } catch {
+        return null;
+      }
+    }
+    persistWidth(width) {
+      const key = this.storageId();
+      if (!key || typeof localStorage === "undefined") return;
+      try {
+        localStorage.setItem(key, String(width));
+      } catch {
+      }
+    }
+    currentWidth() {
+      const inline = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
+      if (Number.isFinite(inline)) return inline;
+      const sideRegion = this.getAttribute("side") === "end" ? this.querySelector(":scope > :last-child:not([data-ui-sidebar-resizer])") : this.querySelector(":scope > :first-child:not([data-ui-sidebar-resizer])");
+      return sideRegion?.getBoundingClientRect().width || this.defaultWidth();
+    }
+    setWidth(value, persist = false, trigger = "programmatic") {
+      const { min, max } = this.bounds();
+      const width = Math.round(Math.max(min, Math.min(max, value)));
+      const previous = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
+      const changed = !Number.isFinite(previous) || previous !== width;
+      this.style.setProperty("--ui-sidebar-width", `${width}px`);
+      this.resizeHandle?.setAttribute("aria-valuemin", String(min));
+      this.resizeHandle?.setAttribute("aria-valuemax", String(max));
+      this.resizeHandle?.setAttribute("aria-valuenow", String(width));
+      if (persist && changed) this.persistWidth(width);
+      if (changed) {
+        this.dispatchEvent(new CustomEvent("resize", { detail: { width, trigger }, bubbles: true }));
+      }
+    }
+    syncResizable() {
+      if (!this.isConnected) return;
+      if (!this.resizable) {
+        this.resizeAbort?.abort();
+        this.resizeAbort = null;
+        this.pointerAbort?.abort();
+        this.pointerAbort = null;
+        this.resizeHandle?.remove();
+        this.resizeHandle = null;
+        return;
+      }
+      if (!this.resizeHandle) {
+        this.resizeHandle = document.createElement("div");
+        this.resizeHandle.setAttribute("data-ui-sidebar-resizer", "");
+        this.resizeHandle.setAttribute("role", "separator");
+        this.resizeHandle.setAttribute("aria-orientation", "vertical");
+        this.resizeHandle.setAttribute("tabindex", "0");
+        this.append(this.resizeHandle);
+      }
+      this.resizeHandle.setAttribute("aria-label", this.getAttribute("resize-label") || "Resize sidebar");
+      this.resizeAbort?.abort();
+      this.resizeAbort = new AbortController();
+      const signal = this.resizeAbort.signal;
+      this.resizeHandle.addEventListener("keydown", (event) => this.onResizeKey(event), { signal });
+      this.resizeHandle.addEventListener("pointerdown", (event) => this.onResizePointer(event), { signal });
+      this.resizeHandle.addEventListener("dblclick", () => this.setWidth(this.defaultWidth(), true, "pointer"), { signal });
+      this.setWidth(this.readStoredWidth() ?? this.currentWidth());
+    }
+    onResizeKey(event) {
+      const { min, max, step } = this.bounds();
+      let next = null;
+      if (event.key === "Home") next = min;
+      if (event.key === "End") next = max;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        const physicalDelta = event.key === "ArrowRight" ? step : -step;
+        next = this.currentWidth() + (this.side === "end" ? -physicalDelta : physicalDelta);
+      }
+      if (next === null) return;
+      event.preventDefault();
+      this.setWidth(next, true, "keyboard");
+    }
+    onResizePointer(event) {
+      if (event.button !== 0 || this.pointerAbort) return;
+      event.preventDefault();
+      const startX = event.clientX;
+      const startWidth = this.currentWidth();
+      const multiplier = this.side === "end" ? -1 : 1;
+      const controller = new AbortController();
+      this.pointerAbort = controller;
+      const finish = () => {
+        this.persistWidth(this.currentWidth());
+        controller.abort();
+        this.pointerAbort = null;
+      };
+      window.addEventListener("pointermove", (moveEvent) => {
+        this.setWidth(startWidth + (moveEvent.clientX - startX) * multiplier, false, "pointer");
+      }, { signal: controller.signal });
+      window.addEventListener("pointerup", finish, { once: true, signal: controller.signal });
+      window.addEventListener("pointercancel", finish, { once: true, signal: controller.signal });
+    }
   }
   class UIReelElement extends UILayoutElement {
     static get observedAttributes() {

package/layout/index.css

@@ -210,14 +210,15 @@
     gap: var(--ui-sidebar-gap);
     align-items: var(--ui-sidebar-align);
   }
-  ui-sidebar > * {
+  ui-sidebar > :not([data-ui-sidebar-resizer]) {
     min-inline-size: 0;
   }
   ui-sidebar > :first-child {
     flex-basis: var(--ui-sidebar-width);
     flex-grow: 1;
   }
-  ui-sidebar > :last-child {
+  ui-sidebar > :last-child:not([data-ui-sidebar-resizer]),
+  ui-sidebar[resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
     flex-basis: 0;
     flex-grow: 999;
     min-inline-size: min(var(--ui-sidebar-content-min), 100%);
@@ -227,7 +228,8 @@
     flex-grow: 999;
     min-inline-size: min(var(--ui-sidebar-content-min), 100%);
   }
-  ui-sidebar[side=end] > :last-child {
+  ui-sidebar[side=end] > :last-child:not([data-ui-sidebar-resizer]),
+  ui-sidebar[side=end][resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
     flex-basis: var(--ui-sidebar-width);
     flex-grow: 1;
     min-inline-size: 0;
@@ -259,6 +261,49 @@
   ui-sidebar[align=end] {
     --ui-sidebar-align: flex-end;
   }
+  ui-sidebar[resizable] {
+    position: relative;
+    flex-wrap: nowrap;
+  }
+  ui-sidebar[resizable] > :first-child:not([data-ui-sidebar-resizer]) {
+    flex: 0 0 var(--ui-sidebar-width);
+  }
+  ui-sidebar[side=end][resizable] > :first-child:not([data-ui-sidebar-resizer]) {
+    flex: 1 1 0;
+  }
+  ui-sidebar[side=end][resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
+    flex: 0 0 var(--ui-sidebar-width);
+  }
+  ui-sidebar > [data-ui-sidebar-resizer] {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-start: var(--ui-sidebar-width);
+    inline-size: 8px;
+    min-inline-size: 8px;
+    transform: translateX(-50%);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  ui-sidebar[side=end] > [data-ui-sidebar-resizer] {
+    inset-inline-start: auto;
+    inset-inline-end: var(--ui-sidebar-width);
+    transform: translateX(50%);
+  }
+  ui-sidebar > [data-ui-sidebar-resizer]::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 3px;
+    inline-size: 2px;
+    background: transparent;
+    transition: background-color 120ms ease;
+  }
+  ui-sidebar > [data-ui-sidebar-resizer]:hover::after,
+  ui-sidebar > [data-ui-sidebar-resizer]:focus-visible::after {
+    background: var(--ui-color-focus, Highlight);
+  }
   ui-reel {
     --ui-reel-gap: var(--ui-space-4, 1rem);
     --ui-reel-item-width: auto;

package/layout/index.d.cts

@@ -1,3 +1,8 @@
+type SidebarResizeTrigger = "keyboard" | "pointer" | "programmatic";
+interface SidebarResizeDetail {
+    width: number;
+    trigger: SidebarResizeTrigger;
+}
 declare function registerLayoutPrimitives(): void;
 
-export { registerLayoutPrimitives };
+export { type SidebarResizeDetail, type SidebarResizeTrigger, registerLayoutPrimitives };

package/layout/index.d.ts

@@ -1,3 +1,8 @@
+type SidebarResizeTrigger = "keyboard" | "pointer" | "programmatic";
+interface SidebarResizeDetail {
+    width: number;
+    trigger: SidebarResizeTrigger;
+}
 declare function registerLayoutPrimitives(): void;
 
-export { registerLayoutPrimitives };
+export { type SidebarResizeDetail, type SidebarResizeTrigger, registerLayoutPrimitives };

package/layout/index.js

@@ -152,7 +152,24 @@ if (typeof HTMLElement !== "undefined") {
   }
   class UISidebarElement extends UILayoutElement {
     static get observedAttributes() {
-      return ["gap", "side", "width", "align"];
+      return ["gap", "side", "width", "align", "resizable", "storage-key", "min-width", "max-width", "resize-step", "resize-label"];
+    }
+    resizeHandle = null;
+    resizeAbort = null;
+    pointerAbort = null;
+    connectedCallback() {
+      this.syncResizable();
+    }
+    disconnectedCallback() {
+      this.resizeAbort?.abort();
+      this.resizeAbort = null;
+      this.pointerAbort?.abort();
+      this.pointerAbort = null;
+    }
+    attributeChangedCallback(name) {
+      if (["resizable", "storage-key", "min-width", "max-width", "resize-step", "resize-label", "side", "width"].includes(name)) {
+        this.syncResizable();
+      }
     }
     get gap() {
       return this.getPrimitiveAttribute("gap");
@@ -178,6 +195,128 @@ if (typeof HTMLElement !== "undefined") {
     set align(value) {
       this.setPrimitiveAttribute("align", value);
     }
+    get resizable() {
+      return this.hasAttribute("resizable");
+    }
+    set resizable(value) {
+      this.toggleAttribute("resizable", value);
+    }
+    numericAttribute(name, fallback) {
+      const parsed = Number(this.getAttribute(name));
+      return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+    }
+    bounds() {
+      const min = this.numericAttribute("min-width", 176);
+      const max = Math.max(min, this.numericAttribute("max-width", 480));
+      return { min, max, step: this.numericAttribute("resize-step", 16) };
+    }
+    defaultWidth() {
+      if (this.width === "narrow") return 224;
+      if (this.width === "wide") return 384;
+      return 288;
+    }
+    storageId() {
+      const key = this.getAttribute("storage-key")?.trim();
+      return key ? `looma:sidebar-width:${key}` : null;
+    }
+    readStoredWidth() {
+      const key = this.storageId();
+      if (!key || typeof localStorage === "undefined") return null;
+      try {
+        const parsed = Number(localStorage.getItem(key));
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+      } catch {
+        return null;
+      }
+    }
+    persistWidth(width) {
+      const key = this.storageId();
+      if (!key || typeof localStorage === "undefined") return;
+      try {
+        localStorage.setItem(key, String(width));
+      } catch {
+      }
+    }
+    currentWidth() {
+      const inline = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
+      if (Number.isFinite(inline)) return inline;
+      const sideRegion = this.getAttribute("side") === "end" ? this.querySelector(":scope > :last-child:not([data-ui-sidebar-resizer])") : this.querySelector(":scope > :first-child:not([data-ui-sidebar-resizer])");
+      return sideRegion?.getBoundingClientRect().width || this.defaultWidth();
+    }
+    setWidth(value, persist = false, trigger = "programmatic") {
+      const { min, max } = this.bounds();
+      const width = Math.round(Math.max(min, Math.min(max, value)));
+      const previous = Number.parseFloat(this.style.getPropertyValue("--ui-sidebar-width"));
+      const changed = !Number.isFinite(previous) || previous !== width;
+      this.style.setProperty("--ui-sidebar-width", `${width}px`);
+      this.resizeHandle?.setAttribute("aria-valuemin", String(min));
+      this.resizeHandle?.setAttribute("aria-valuemax", String(max));
+      this.resizeHandle?.setAttribute("aria-valuenow", String(width));
+      if (persist && changed) this.persistWidth(width);
+      if (changed) {
+        this.dispatchEvent(new CustomEvent("resize", { detail: { width, trigger }, bubbles: true }));
+      }
+    }
+    syncResizable() {
+      if (!this.isConnected) return;
+      if (!this.resizable) {
+        this.resizeAbort?.abort();
+        this.resizeAbort = null;
+        this.pointerAbort?.abort();
+        this.pointerAbort = null;
+        this.resizeHandle?.remove();
+        this.resizeHandle = null;
+        return;
+      }
+      if (!this.resizeHandle) {
+        this.resizeHandle = document.createElement("div");
+        this.resizeHandle.setAttribute("data-ui-sidebar-resizer", "");
+        this.resizeHandle.setAttribute("role", "separator");
+        this.resizeHandle.setAttribute("aria-orientation", "vertical");
+        this.resizeHandle.setAttribute("tabindex", "0");
+        this.append(this.resizeHandle);
+      }
+      this.resizeHandle.setAttribute("aria-label", this.getAttribute("resize-label") || "Resize sidebar");
+      this.resizeAbort?.abort();
+      this.resizeAbort = new AbortController();
+      const signal = this.resizeAbort.signal;
+      this.resizeHandle.addEventListener("keydown", (event) => this.onResizeKey(event), { signal });
+      this.resizeHandle.addEventListener("pointerdown", (event) => this.onResizePointer(event), { signal });
+      this.resizeHandle.addEventListener("dblclick", () => this.setWidth(this.defaultWidth(), true, "pointer"), { signal });
+      this.setWidth(this.readStoredWidth() ?? this.currentWidth());
+    }
+    onResizeKey(event) {
+      const { min, max, step } = this.bounds();
+      let next = null;
+      if (event.key === "Home") next = min;
+      if (event.key === "End") next = max;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        const physicalDelta = event.key === "ArrowRight" ? step : -step;
+        next = this.currentWidth() + (this.side === "end" ? -physicalDelta : physicalDelta);
+      }
+      if (next === null) return;
+      event.preventDefault();
+      this.setWidth(next, true, "keyboard");
+    }
+    onResizePointer(event) {
+      if (event.button !== 0 || this.pointerAbort) return;
+      event.preventDefault();
+      const startX = event.clientX;
+      const startWidth = this.currentWidth();
+      const multiplier = this.side === "end" ? -1 : 1;
+      const controller = new AbortController();
+      this.pointerAbort = controller;
+      const finish = () => {
+        this.persistWidth(this.currentWidth());
+        controller.abort();
+        this.pointerAbort = null;
+      };
+      window.addEventListener("pointermove", (moveEvent) => {
+        this.setWidth(startWidth + (moveEvent.clientX - startX) * multiplier, false, "pointer");
+      }, { signal: controller.signal });
+      window.addEventListener("pointerup", finish, { once: true, signal: controller.signal });
+      window.addEventListener("pointercancel", finish, { once: true, signal: controller.signal });
+    }
   }
   class UIReelElement extends UILayoutElement {
     static get observedAttributes() {

package/layout.css

@@ -151,12 +151,13 @@
     align-items: var(--ui-sidebar-align);
   }
 
-  ui-sidebar > * { min-inline-size: 0; }
+  ui-sidebar > :not([data-ui-sidebar-resizer]) { min-inline-size: 0; }
   ui-sidebar > :first-child {
     flex-basis: var(--ui-sidebar-width);
     flex-grow: 1;
   }
-  ui-sidebar > :last-child {
+  ui-sidebar > :last-child:not([data-ui-sidebar-resizer]),
+  ui-sidebar[resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
     flex-basis: 0;
     flex-grow: 999;
     min-inline-size: min(var(--ui-sidebar-content-min), 100%);
@@ -166,7 +167,8 @@
     flex-grow: 999;
     min-inline-size: min(var(--ui-sidebar-content-min), 100%);
   }
-  ui-sidebar[side="end"] > :last-child {
+  ui-sidebar[side="end"] > :last-child:not([data-ui-sidebar-resizer]),
+  ui-sidebar[side="end"][resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
     flex-basis: var(--ui-sidebar-width);
     flex-grow: 1;
     min-inline-size: 0;
@@ -180,6 +182,49 @@
   ui-sidebar[align="start"] { --ui-sidebar-align: flex-start; }
   ui-sidebar[align="center"] { --ui-sidebar-align: center; }
   ui-sidebar[align="end"] { --ui-sidebar-align: flex-end; }
+  ui-sidebar[resizable] {
+    position: relative;
+    flex-wrap: nowrap;
+  }
+  ui-sidebar[resizable] > :first-child:not([data-ui-sidebar-resizer]) {
+    flex: 0 0 var(--ui-sidebar-width);
+  }
+  ui-sidebar[side="end"][resizable] > :first-child:not([data-ui-sidebar-resizer]) {
+    flex: 1 1 0;
+  }
+  ui-sidebar[side="end"][resizable] > :nth-last-child(2):not([data-ui-sidebar-resizer]) {
+    flex: 0 0 var(--ui-sidebar-width);
+  }
+  ui-sidebar > [data-ui-sidebar-resizer] {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-start: var(--ui-sidebar-width);
+    inline-size: 8px;
+    min-inline-size: 8px;
+    transform: translateX(-50%);
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  ui-sidebar[side="end"] > [data-ui-sidebar-resizer] {
+    inset-inline-start: auto;
+    inset-inline-end: var(--ui-sidebar-width);
+    transform: translateX(50%);
+  }
+  ui-sidebar > [data-ui-sidebar-resizer]::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 3px;
+    inline-size: 2px;
+    background: transparent;
+    transition: background-color 120ms ease;
+  }
+  ui-sidebar > [data-ui-sidebar-resizer]:hover::after,
+  ui-sidebar > [data-ui-sidebar-resizer]:focus-visible::after {
+    background: var(--ui-color-focus, Highlight);
+  }
 
   ui-reel {
     --ui-reel-gap: var(--ui-space-4, 1rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",