@pure-ds/core 0.6.9 → 0.6.11

package/public/assets/pds/components/pds-live-template-canvas.js

@@ -0,0 +1,171 @@
+const COMPONENT_TAG = "pds-live-template-canvas";
+const PDS = globalThis.PDS;
+
+let managerPromise = null;
+
+async function getManagerModule() {
+  if (managerPromise) return managerPromise;
+  managerPromise = (async () => {
+    const candidates = [
+      PDS?.currentConfig?.managerURL,
+      "../core/pds-manager.js",
+      "/assets/pds/core/pds-manager.js",
+    ].filter(Boolean);
+
+    const attempted = new Set();
+    for (const candidate of candidates) {
+      try {
+        const resolved = new URL(candidate, import.meta.url).href;
+        if (attempted.has(resolved)) continue;
+        attempted.add(resolved);
+        const mod = await import(resolved);
+        if (mod && typeof mod === "object") return mod;
+      } catch (e) {}
+    }
+
+    return null;
+  })();
+
+  return managerPromise;
+}
+
+class PdsLiveTemplateCanvas extends HTMLElement {
+  constructor() {
+    super();
+    this._templates = [];
+    this._selectedTemplateId = "";
+  }
+
+  connectedCallback() {
+    this._renderShell();
+    this._loadTemplates();
+  }
+
+  _renderShell() {
+    this.className = "stack-sm";
+    this.innerHTML = `
+      <label class="stack-xs">
+        <span>Template</span>
+        <div class="pds-live-template-omnibox"></div>
+      </label>
+      <p class="text-muted pds-live-template-description"></p>
+    `;
+
+  }
+
+  async _loadTemplates() {
+    const manager = await getManagerModule();
+    if (typeof manager?.listLiveTemplates !== "function") return;
+
+    this._templates = (await manager.listLiveTemplates()) || [];
+    this._selectedTemplateId = "";
+
+    const host = this.querySelector(".pds-live-template-omnibox");
+    if (!host) return;
+
+    host.replaceChildren();
+    try {
+      const omnibox = document.createElement("pds-omnibox");
+      omnibox.setAttribute("item-grid", "45px 1fr 0");
+      omnibox.setAttribute("placeholder", "Search canvas templates...");
+      omnibox.value = "";
+
+      const templates = this._templates;
+      omnibox.settings = {
+        hideCategory: true,
+        itemGrid: "45px 1fr 0",
+        categories: {
+          Templates: {
+            trigger: () => true,
+            getItems: (context = {}) => {
+              const query = String(context?.search || "").toLowerCase().trim();
+              return templates
+                .filter((item) => {
+                  if (!query) return true;
+                  const haystack = [item.name, item.description, ...(item.tags || [])]
+                    .join(" ")
+                    .toLowerCase();
+                  return haystack.includes(query);
+                })
+                .map((item) => ({
+                  id: item.id,
+                  text: item.name,
+                  description: item.description,
+                  icon: item.icon || "grid-four",
+                }));
+            },
+            action: (selection) => {
+              this._selectedTemplateId = selection?.id || "";
+              this._updateDescription();
+              this._applyTemplate();
+              return selection?.id || "";
+            },
+          },
+        },
+      };
+
+      omnibox.addEventListener("result-selected", (event) => {
+        const selectedId =
+          event?.detail?.id ||
+          this._templates.find((item) => item.name === event?.detail?.text)?.id ||
+          this._selectedTemplateId;
+        if (selectedId) {
+          this._selectedTemplateId = selectedId;
+        }
+        const selected = this._templates.find((item) => item.id === this._selectedTemplateId);
+        if (selected?.name) {
+          omnibox.value = selected.name;
+        }
+        this._updateDescription();
+      });
+
+      host.appendChild(omnibox);
+    } catch (error) {
+      const fallback = document.createElement("select");
+      fallback.className = "pds-live-template-select";
+      this._templates.forEach((template) => {
+        const option = document.createElement("option");
+        option.value = template.id;
+        option.textContent = template.name;
+        fallback.appendChild(option);
+      });
+      fallback.addEventListener("change", () => {
+        this._selectedTemplateId = fallback.value;
+        this._updateDescription();
+        this._applyTemplate();
+      });
+      host.appendChild(fallback);
+    }
+
+    this._updateDescription();
+  }
+
+  _updateDescription() {
+    const description = this.querySelector(".pds-live-template-description");
+    if (!description) return;
+    const selected = this._templates.find((item) => item.id === this._selectedTemplateId);
+    description.textContent = selected?.description || "";
+  }
+
+  async _applyTemplate() {
+    if (!this._selectedTemplateId) return;
+
+    const manager = await getManagerModule();
+    if (typeof manager?.runLiveImport !== "function") return;
+
+    const result = await manager.runLiveImport({
+      sourceType: "template",
+      templateId: this._selectedTemplateId,
+    });
+
+    this.dispatchEvent(
+      new CustomEvent("pds:live-template:inject", {
+        bubbles: true,
+        composed: true,
+        detail: { result, templateId: this._selectedTemplateId },
+      })
+    );
+  }
+}
+
+customElements.define(COMPONENT_TAG, PdsLiveTemplateCanvas);

package/public/assets/pds/components/pds-omnibox.js

@@ -10,7 +10,6 @@
  * @attr {boolean} disabled - Disable the input
  * @attr {boolean} required - Mark the input as required
  * @attr {string} autocomplete - Native autocomplete attribute (default: off)
- * @attr {string} item-grid - Grid template columns for suggestion items
  *
  * @property {Object} settings - AutoComplete settings object (required by consumer)
  */
@@ -30,7 +29,6 @@ export class PdsOmnibox extends HTMLElement {
       "required",
       "autocomplete",
       "icon",
-      "item-grid",
     ];
   }
 
@@ -165,15 +163,6 @@ export class PdsOmnibox extends HTMLElement {
     else this.setAttribute("icon", value);
   }
 
-  get itemGrid() {
-    return this.getAttribute("item-grid") || "";
-  }
-
-  set itemGrid(value) {
-    if (value == null || value === "") this.removeAttribute("item-grid");
-    else this.setAttribute("item-grid", value);
-  }
-
   formAssociatedCallback() {}
 
   formDisabledCallback(disabled) {
@@ -251,7 +240,7 @@ export class PdsOmnibox extends HTMLElement {
 					--ac-margin: var(--spacing-0);
 					--icon-size: var(--spacing-6);
 					--ac-itm-height-default: 5rem;
-					--ac-max-height-default: 300px;
+          --ac-max-height-default: 300px;
 					--ac-viewport-gap: var(--spacing-4);
 					--ac-suggest-offset: var(--spacing-1);
 				}
@@ -535,9 +524,6 @@ export class PdsOmnibox extends HTMLElement {
     if (this.required) this.#input.setAttribute("required", "");
     else this.#input.removeAttribute("required");
 
-    if (this.itemGrid) this.style.setProperty("--ac-grid", this.itemGrid);
-    else this.style.removeProperty("--ac-grid");
-
     this.#updateFormValue(this.#input.value);
   }
 
@@ -579,7 +565,8 @@ export class PdsOmnibox extends HTMLElement {
         container.style.removeProperty("--ac-color-default");
         container.style.removeProperty("--ac-accent-color");
 
-        const gridOverride = this.itemGrid;
+        const gridOverride =
+          typeof settings.itemGrid === "string" ? settings.itemGrid.trim() : "";
         if (gridOverride) {
           container.style.setProperty("--ac-grid", gridOverride);
         } else if (settings.hideCategory === true) {
@@ -661,6 +648,8 @@ export class PdsOmnibox extends HTMLElement {
     if (!suggestion) return;
     this.#suggestionsObserver = new MutationObserver(() => {
       if (!suggestion.classList.contains("ac-active")) {
+        this.removeAttribute("data-suggestions-open");
+        this.#clearSuggestionOverlayStyles(suggestion);
         this.#resetIconToDefault();
       }
     });
@@ -695,6 +684,106 @@ export class PdsOmnibox extends HTMLElement {
     this.#autoCompleteViewportHandler = null;
   }
 
+  #clearSuggestionOverlayStyles(suggestion) {
+    if (!suggestion || !suggestion.style) return;
+    suggestion.style.removeProperty("position");
+    suggestion.style.removeProperty("left");
+    suggestion.style.removeProperty("right");
+    suggestion.style.removeProperty("top");
+    suggestion.style.removeProperty("bottom");
+    suggestion.style.removeProperty("width");
+    suggestion.style.removeProperty("max-width");
+  }
+
+  #getComposedParent(node) {
+    if (!node) return null;
+    if (node.parentElement) return node.parentElement;
+    const root = node.getRootNode?.();
+    if (root && root.host) return root.host;
+    return null;
+  }
+
+  #hasTransformedAncestor(startNode) {
+    let current = startNode;
+    let safety = 0;
+    while (current && safety < 80) {
+      if (current instanceof Element) {
+        const style = getComputedStyle(current);
+        if (
+          style.transform !== "none" ||
+          style.perspective !== "none" ||
+          style.filter !== "none" ||
+          style.backdropFilter !== "none"
+        ) {
+          return true;
+        }
+      }
+      current = this.#getComposedParent(current);
+      safety += 1;
+    }
+    return false;
+  }
+
+  #shouldUseFixedSuggestionOverlay(container) {
+    if (!container) return false;
+    if (this.closest("pds-drawer, dialog")) return false;
+    return !this.#hasTransformedAncestor(this);
+  }
+
+  #positionSuggestionInline({ container, suggestion, rect, direction, offset, maxHeight }) {
+    if (!container || !suggestion) return;
+    this.#clearSuggestionOverlayStyles(suggestion);
+    if (direction === "up") {
+      suggestion.style.top = "auto";
+      suggestion.style.bottom = `${Math.round(rect.height + offset)}px`;
+    } else {
+      suggestion.style.bottom = "auto";
+      suggestion.style.top = `${Math.round(rect.height + offset)}px`;
+    }
+    container.setAttribute("data-direction", direction);
+    suggestion.setAttribute("data-direction", direction);
+    container.style.setProperty("--ac-max-height", `${maxHeight}px`);
+  }
+
+  #positionSuggestionOverlay({
+    container,
+    suggestion,
+    rect,
+    viewportHeight,
+    viewportWidth,
+    direction,
+    maxHeight,
+    gap,
+    offset,
+  }) {
+    if (!container || !suggestion || !suggestion.style) return;
+    if (suggestion.classList.contains("full-mobile")) {
+      this.#clearSuggestionOverlayStyles(suggestion);
+      return;
+    }
+
+    const clampedLeft = Math.max(gap, Math.min(rect.left, viewportWidth - rect.width - gap));
+    const clampedWidth = Math.max(0, Math.min(rect.width, viewportWidth - gap * 2));
+
+    suggestion.style.position = "fixed";
+    suggestion.style.left = `${Math.round(clampedLeft)}px`;
+    suggestion.style.width = `${Math.round(clampedWidth)}px`;
+    suggestion.style.maxWidth = `${Math.round(Math.max(0, viewportWidth - gap * 2))}px`;
+    suggestion.style.right = "auto";
+
+    if (direction === "up") {
+      suggestion.style.top = "auto";
+      suggestion.style.bottom = `${Math.round(viewportHeight - rect.top + offset)}px`;
+    } else {
+      suggestion.style.bottom = "auto";
+      suggestion.style.top = `${Math.round(rect.bottom + offset)}px`;
+    }
+
+    container.setAttribute("data-direction", direction);
+    suggestion.setAttribute("data-direction", direction);
+    container.style.setProperty("--ac-max-height", `${maxHeight}px`);
+  }
+
   #updateSuggestionMaxHeight() {
     if (!this.#input) return;
     const container = this.#input.parentElement;
@@ -709,6 +798,7 @@ export class PdsOmnibox extends HTMLElement {
       suggestion?.getAttribute("data-direction") ||
       container.getAttribute("data-direction") ||
       "down";
+    const offset = this.#readSpacingToken(container, "--ac-suggest-offset") || 0;
 
     const availableDown = viewportHeight - rect.bottom - gap;
     const availableUp = rect.top - gap;
@@ -718,8 +808,6 @@ export class PdsOmnibox extends HTMLElement {
       container.setAttribute("data-direction", direction);
       if (suggestion) suggestion.setAttribute("data-direction", direction);
       if (suggestion) {
-        const offset =
-          this.#readSpacingToken(container, "--ac-suggest-offset") || 0;
         if (direction === "up") {
           suggestion.style.top = "auto";
           suggestion.style.bottom = `${rect.height + offset}px`;
@@ -732,8 +820,46 @@ export class PdsOmnibox extends HTMLElement {
 
     const available = direction === "up" ? availableUp : availableDown;
 
-    const maxHeight = Math.max(0, Math.floor(available));
+    const configuredMaxHeight =
+      this.#readSpacingToken(container, "--ac-max-height-default") || 200;
+    const maxHeight = Math.max(
+      0,
+      Math.floor(Math.min(available, configuredMaxHeight)),
+    );
     container.style.setProperty("--ac-max-height", `${maxHeight}px`);
+
+    const isSuggestionActive = suggestion?.classList?.contains("ac-active");
+    this.toggleAttribute("data-suggestions-open", Boolean(isSuggestionActive));
+
+    if (!suggestion || !isSuggestionActive || suggestion.classList.contains("full-mobile")) {
+      this.#clearSuggestionOverlayStyles(suggestion);
+      return;
+    }
+
+    if (!this.#shouldUseFixedSuggestionOverlay(container)) {
+      this.#positionSuggestionInline({
+        container,
+        suggestion,
+        rect,
+        direction,
+        offset,
+        maxHeight,
+      });
+      return;
+    }
+
+    const viewportWidth = window.visualViewport?.width || window.innerWidth;
+    this.#positionSuggestionOverlay({
+      container,
+      suggestion,
+      rect,
+      viewportHeight,
+      viewportWidth,
+      direction,
+      maxHeight,
+      gap,
+      offset,
+    });
   }
 
   #resolveSuggestionDirection(container) {
@@ -743,7 +869,7 @@ export class PdsOmnibox extends HTMLElement {
     const availableDown = viewportHeight - rect.bottom - gap;
     const availableUp = rect.top - gap;
     const maxDefault =
-      this.#readSpacingToken(container, "--ac-max-height-default") || 300;
+      this.#readSpacingToken(container, "--ac-max-height-default") || 200;
     const minDown = Math.min(maxDefault, 180);
 
     return availableDown >= minDown || availableDown >= availableUp

package/public/assets/pds/components/pds-scrollrow.js

@@ -11,6 +11,8 @@
  *
  * @attr {string} label - Accessible label for the scroll region; also used as fallback heading copy
  * @attr {"start"|"center"} snap - Snap alignment for tiles when scrolling (default: start)
+ * @attr {string} tile-min - Minimum tile width (CSS length, e.g. "250px")
+ * @attr {string} tile-max - Maximum tile width (CSS length, e.g. "360px")
  */
 class PdsScrollrow extends HTMLElement {
   #viewport;
@@ -19,7 +21,7 @@ class PdsScrollrow extends HTMLElement {
   #adopted = false;
 
   static get observedAttributes() {
-    return ["label", "snap"];
+    return ["label", "snap", "tile-min", "tile-max"];
   }
 
   constructor() {
@@ -128,6 +130,36 @@ class PdsScrollrow extends HTMLElement {
     else this.setAttribute("snap", String(val));
   }
 
+  /**
+   * Minimum tile size applied to slotted content.
+   * @returns {string|null}
+   */
+  get tileMin() {
+    return this.getAttribute("tile-min");
+  }
+  /**
+   * @param {string|null} val
+   */
+  set tileMin(val) {
+    if (val == null) this.removeAttribute("tile-min");
+    else this.setAttribute("tile-min", String(val));
+  }
+
+  /**
+   * Maximum tile size applied to slotted content.
+   * @returns {string|null}
+   */
+  get tileMax() {
+    return this.getAttribute("tile-max");
+  }
+  /**
+   * @param {string|null} val
+   */
+  set tileMax(val) {
+    if (val == null) this.removeAttribute("tile-max");
+    else this.setAttribute("tile-max", String(val));
+  }
+
   /**
    * Lifecycle hook called when the element is inserted into the document.
    */
@@ -189,6 +221,11 @@ class PdsScrollrow extends HTMLElement {
         this.#applySnap();
         break;
       }
+      case "tile-min":
+      case "tile-max": {
+        this.#applyTileSizing();
+        break;
+      }
     }
   }
 
@@ -256,6 +293,7 @@ class PdsScrollrow extends HTMLElement {
 
     // Apply initial snap alignment
     this.#applySnap();
+    this.#applyTileSizing();
 
     // Observe size changes to refresh controls
     this.#ro = new ResizeObserver(() => this.#updateControls());
@@ -274,6 +312,23 @@ class PdsScrollrow extends HTMLElement {
     }
   }
 
+  #applyTileSizing() {
+    const tileMin = this.tileMin;
+    const tileMax = this.tileMax;
+
+    if (tileMin && String(tileMin).trim()) {
+      this.style.setProperty("--tile-min", String(tileMin).trim());
+    } else {
+      this.style.removeProperty("--tile-min");
+    }
+
+    if (tileMax && String(tileMax).trim()) {
+      this.style.setProperty("--tile-max", String(tileMax).trim());
+    } else {
+      this.style.removeProperty("--tile-max");
+    }
+  }
+
   /**
    * Scroll the viewport by roughly one page in the indicated direction.
    * @param {Event} e

package/public/assets/pds/components/pds-toaster.js

@@ -124,6 +124,14 @@ export class AppToaster extends HTMLElement {
            white-space: pre-line;
         }
 
+        aside.toast .toast-content {
+          width: 100%;
+        }
+
+        aside.toast .toast-action {
+          margin-top: var(--spacing-2);
+        }
+
         /* Mobile responsive toast positioning */
         @_media (max-width: 640px) {
           :host {
@@ -182,19 +190,23 @@ export class AppToaster extends HTMLElement {
       duration: null, // auto-calculated based on reading time
       closable: true,
       persistent: false, // if true, doesn't auto-dismiss
+      html: false,
+      action: null,
     };
 
     const config = { ...defaults, ...options };
 
     // Calculate reading time (average 200 words per minute)
-    const wordCount = message.split(/\s+/).length;
+    const messageText = String(message || "");
+    const readingText = config.html ? messageText.replace(/<[^>]*>/g, " ") : messageText;
+    const wordCount = readingText.split(/\s+/).filter(Boolean).length;
     const baseReadingTime = Math.max(2000, (wordCount / 200) * 60 * 1000); // minimum 2 seconds
 
     // Extend time for errors (people need more time to process error messages)
     const multiplier = config.type === "error" ? 1.5 : 1;
     const duration = config.duration || baseReadingTime * multiplier;
 
-    return this.#showToast(message, config, duration);
+    return this.#showToast(messageText, config, duration);
   }
 
   /*
@@ -213,7 +225,9 @@ export class AppToaster extends HTMLElement {
       config.type,
       config.closable,
       duration,
-      config.persistent
+      config.persistent,
+      config.html,
+      config.action
     );
 
     // Add to DOM
@@ -247,7 +261,7 @@ export class AppToaster extends HTMLElement {
    * @param {boolean} persistent
    * @returns {HTMLElement}
    */
-  createToastElement(id, message, type, closable, duration, persistent) {
+  createToastElement(id, message, type, closable, duration, persistent, html = false, action = null) {
     const toast = document.createElement("aside");
     toast.className = `toast callout ${this.#getAlertClass(type)}`;
     toast.setAttribute("data-toast-id", id);
@@ -260,6 +274,7 @@ export class AppToaster extends HTMLElement {
     icon.setAttribute("size", "lg");
 
     const content = document.createElement("div");
+    content.className = "toast-content";
 
     const title = document.createElement("div");
     title.className = "callout-title";
@@ -267,11 +282,41 @@ export class AppToaster extends HTMLElement {
 
     const text = document.createElement("p");
     text.style.margin = "0";
-    text.textContent = message;
+    if (html) {
+      text.innerHTML = String(message || "");
+    } else {
+      text.textContent = String(message || "");
+    }
 
     content.appendChild(title);
     content.appendChild(text);
 
+    if (action && typeof action === "object" && action.label) {
+      const actionButton = document.createElement("button");
+      actionButton.className = "btn-outline btn-sm toast-action";
+      actionButton.type = "button";
+      const actionLabel = document.createElement("span");
+      actionLabel.textContent = String(action.label);
+
+      if (action.icon) {
+        const icon = document.createElement("pds-icon");
+        icon.setAttribute("icon", String(action.icon));
+        icon.setAttribute("size", "sm");
+        actionButton.appendChild(icon);
+      }
+
+      actionButton.appendChild(actionLabel);
+      actionButton.addEventListener("click", () => {
+        if (typeof action.onClick === "function") {
+          action.onClick();
+        }
+        if (action.dismissOnClick !== false) {
+          this.dismissToast(id);
+        }
+      });
+      content.appendChild(actionButton);
+    }
+
     toast.appendChild(icon);
     toast.appendChild(content);