@pure-ds/core 0.7.19 → 0.7.21

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

@@ -0,0 +1,203 @@
+const SHIKI_CDN_URL = 'https://esm.sh/shiki@1.0.0';
+
+const SHIKI_LANGS = ['html', 'css', 'javascript', 'typescript', 'json', 'bash', 'shell'];
+const SHIKI_THEMES = ['github-dark', 'github-light'];
+
+let shikiModulePromise = null;
+let highlighterPromise = null;
+
+const escapeHtml = (text) => {
+  if (text == null) return '';
+  const value = typeof text === 'string' ? text : String(text);
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
+
+const resolveTheme = (preferredTheme) => {
+  if (preferredTheme === 'github-dark' || preferredTheme === 'github-light') {
+    return preferredTheme;
+  }
+
+  const docTheme = document.documentElement.getAttribute('data-theme')
+    || document.body?.getAttribute('data-theme');
+
+  if (docTheme === 'dark') return 'github-dark';
+  if (docTheme === 'light') return 'github-light';
+
+  const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)')?.matches;
+  return prefersDark ? 'github-dark' : 'github-light';
+};
+
+const resolveLang = (lang) => {
+  const next = String(lang || 'html').trim().toLowerCase();
+  if (next === 'js') return 'javascript';
+  if (next === 'ts') return 'typescript';
+  if (next === 'sh') return 'shell';
+  return next;
+};
+
+async function loadShikiModule() {
+  if (shikiModulePromise) return shikiModulePromise;
+
+  shikiModulePromise = (async () => {
+    try {
+      return await import('#shiki');
+    } catch {
+      return import(SHIKI_CDN_URL);
+    }
+  })();
+
+  return shikiModulePromise;
+}
+
+async function loadHighlighter() {
+  if (highlighterPromise) return highlighterPromise;
+
+  highlighterPromise = (async () => {
+    try {
+      const shiki = await loadShikiModule();
+      if (typeof shiki?.getHighlighter !== 'function') return null;
+      return shiki.getHighlighter({ themes: SHIKI_THEMES, langs: SHIKI_LANGS });
+    } catch {
+      return null;
+    }
+  })();
+
+  return highlighterPromise;
+}
+
+export class PDSCode extends HTMLElement {
+  static get observedAttributes() {
+    return ['code', 'lang', 'theme'];
+  }
+
+  constructor() {
+    super();
+    this._code = null;
+    this._capturedInitialText = false;
+    this._renderToken = 0;
+    this._textObserver = null;
+  }
+
+  connectedCallback() {
+    this.captureInitialText();
+    this.startTextObserver();
+    this.render();
+
+    queueMicrotask(() => {
+      if (!this.isConnected || this.hasAttribute('code')) return;
+      if (this.ensureCodeFromContent()) {
+        this.render();
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    this.stopTextObserver();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  set code(value) {
+    this._code = value == null ? '' : String(value);
+    this.render();
+  }
+
+  get code() {
+    if (this._code != null) return this._code;
+    if (this.hasAttribute('code')) return this.getAttribute('code') || '';
+    return '';
+  }
+
+  setCode(value, { lang, theme } = {}) {
+    this.code = value;
+    if (lang) this.setAttribute('lang', lang);
+    if (theme) this.setAttribute('theme', theme);
+  }
+
+  captureInitialText() {
+    if (this._capturedInitialText || this._code != null || this.hasAttribute('code')) {
+      return;
+    }
+
+    this._code = this.textContent || '';
+    this._capturedInitialText = true;
+  }
+
+  ensureCodeFromContent() {
+    if (this.hasAttribute('code')) return false;
+    if (this._code && this._code.trim()) return false;
+
+    const text = this.textContent || '';
+    if (!text.trim()) return false;
+
+    this._code = text;
+    this._capturedInitialText = true;
+    return true;
+  }
+
+  startTextObserver() {
+    if (this._textObserver || this.hasAttribute('code')) return;
+
+    this._textObserver = new MutationObserver(() => {
+      if (!this.isConnected || this.hasAttribute('code')) return;
+      if (this.ensureCodeFromContent()) {
+        this.render();
+      }
+    });
+
+    this._textObserver.observe(this, {
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  }
+
+  stopTextObserver() {
+    if (!this._textObserver) return;
+    this._textObserver.disconnect();
+    this._textObserver = null;
+  }
+
+  async render() {
+    const renderToken = ++this._renderToken;
+    if (this.ensureCodeFromContent()) {
+      this.stopTextObserver();
+    }
+
+    const sourceCode = this.code;
+    const lang = resolveLang(this.getAttribute('lang') || 'html');
+    const theme = resolveTheme(this.getAttribute('theme'));
+
+    if (!sourceCode) {
+      return;
+    }
+
+    const highlighter = await loadHighlighter();
+
+    if (renderToken !== this._renderToken) {
+      return;
+    }
+
+    if (highlighter) {
+      try {
+        this.innerHTML = highlighter.codeToHtml(sourceCode, { lang, theme });
+        return;
+      } catch {
+        // Fall through to escaped pre/code fallback
+      }
+    }
+
+    this.innerHTML = `<pre><code>${escapeHtml(sourceCode)}</code></pre>`;
+  }
+}
+
+if (!customElements.get('pds-code')) {
+  customElements.define('pds-code', PDSCode);
+}

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

@@ -48,10 +48,12 @@ export class SvgIcon extends HTMLElement {
   static spritePromises = new Map();
   static inlineSprites = new Map();
 
-  // Cache for externally fetched SVG icons (icon name -> { content, viewBox, loaded, error })
+  // Cache for externally fetched SVG icons (path-aware key -> { content, viewBox, loaded, error })
   static externalIconCache = new Map();
-  // Promises for in-flight external icon fetches
+  // Promises for in-flight external icon fetches (path-aware key)
   static externalIconPromises = new Map();
+  // Tracks base paths already logged for debug diagnostics
+  static externalPathDebugLogged = new Set();
 
   static instances = new Set();
 
@@ -199,6 +201,8 @@ export class SvgIcon extends HTMLElement {
     // Determine if we should use sprite or fallback
     let useFallback = this.hasAttribute('no-sprite') || !this.spriteAvailable();
 
+    const externalIconBasePath = SvgIcon.normalizeExternalIconPath();
+
     let effectiveHref = spriteHref ? `${spriteHref}#${icon}` : `#${icon}`;
     let inlineSymbolContent = null;
     let inlineSymbolViewBox = null;
@@ -241,7 +245,8 @@ export class SvgIcon extends HTMLElement {
     // IMPORTANT: Don't try external icons while sprite is still loading
     const hasFallback = SvgIcon.#fallbackIcons.hasOwnProperty(icon);
     if (spriteIconNotFound && !hasFallback && !spriteStillLoading) {
-      const cached = SvgIcon.externalIconCache.get(icon);
+      const cacheKey = SvgIcon.getExternalIconCacheKey(icon, externalIconBasePath);
+      const cached = SvgIcon.externalIconCache.get(cacheKey);
       if (cached) {
         if (cached.loaded && cached.content) {
           useExternalIcon = true;
@@ -252,7 +257,7 @@ export class SvgIcon extends HTMLElement {
         }
       } else {
         // Trigger async fetch - will re-render when complete
-        SvgIcon.fetchExternalIcon(icon);
+        SvgIcon.fetchExternalIcon(icon, externalIconBasePath);
         useFallback = true;
       }
     }
@@ -306,7 +311,8 @@ export class SvgIcon extends HTMLElement {
 
       const hasFallbackLocal = SvgIcon.#fallbackIcons.hasOwnProperty(iconName);
       if (spriteIconNotFoundLocal && !hasFallbackLocal && !spriteStillLoadingLocal) {
-        const cached = SvgIcon.externalIconCache.get(iconName);
+        const cacheKey = SvgIcon.getExternalIconCacheKey(iconName, externalIconBasePath);
+        const cached = SvgIcon.externalIconCache.get(cacheKey);
         if (cached) {
           if (cached.loaded && cached.content) {
             useExternalIconLocal = true;
@@ -315,7 +321,7 @@ export class SvgIcon extends HTMLElement {
             useFallbackLocal = true;
           }
         } else {
-          SvgIcon.fetchExternalIcon(iconName);
+          SvgIcon.fetchExternalIcon(iconName, externalIconBasePath);
           useFallbackLocal = true;
         }
       }
@@ -582,17 +588,20 @@ export class SvgIcon extends HTMLElement {
    */
   static getExternalIconPath() {
     try {
-      // Try to get from PDS.compiled.tokens.icons.externalPath (live mode)
-      if (PDS?.compiled?.tokens?.icons?.externalPath) {
-        return PDS.compiled.tokens.icons.externalPath;
-      }
-      // Fallback: check compiled.config.design.icons.externalPath
-      if (PDS?.compiled?.config?.design?.icons?.externalPath) {
-        return PDS.compiled.config.design.icons.externalPath;
-      }
-      // Fallback: check currentConfig
-      if (PDS?.currentConfig?.design?.icons?.externalPath) {
-        return PDS.currentConfig.design.icons.externalPath;
+      const candidates = [
+        PDS?.compiled?.tokens?.icons?.externalPath,
+        PDS?.compiled?.config?.design?.icons?.externalPath,
+        PDS?.compiled?.config?.icons?.externalPath,
+        PDS?.compiled?.options?.design?.icons?.externalPath,
+        PDS?.compiled?.options?.icons?.externalPath,
+        PDS?.currentConfig?.design?.icons?.externalPath,
+        PDS?.currentConfig?.icons?.externalPath,
+      ];
+
+      for (const value of candidates) {
+        if (typeof value === 'string' && value.trim()) {
+          return value;
+        }
       }
     } catch (e) {
       // Ignore errors accessing config
@@ -601,29 +610,95 @@ export class SvgIcon extends HTMLElement {
     return '/assets/img/icons/';
   }
 
+  /**
+   * Normalize the external icon path to make cache keys and URL joining stable.
+   * @private
+   * @param {string} [basePath]
+   * @returns {string}
+   */
+  static normalizeExternalIconPath(basePath) {
+    const rawBasePath = typeof basePath === 'string' ? basePath : SvgIcon.getExternalIconPath();
+    const trimmed = (rawBasePath || '/assets/img/icons/').trim();
+    if (!trimmed) {
+      return '/assets/img/icons/';
+    }
+    return trimmed.endsWith('/') ? trimmed : `${trimmed}/`;
+  }
+
+  /**
+   * Build a deterministic cache key for external icon content.
+   * @private
+   * @param {string} iconName
+   * @param {string} basePath
+   * @returns {string}
+   */
+  static getExternalIconCacheKey(iconName, basePath) {
+    return `${SvgIcon.normalizeExternalIconPath(basePath)}::${iconName}`;
+  }
+
+  /**
+   * Resolve an external icon URL from icon name + base path.
+   * @private
+   * @param {string} iconName
+   * @param {string} basePath
+   * @returns {string}
+   */
+  static getExternalIconURL(iconName, basePath) {
+    const normalizedBasePath = SvgIcon.normalizeExternalIconPath(basePath);
+    try {
+      if (typeof window !== 'undefined' && window.location?.href) {
+        return new URL(`${iconName}.svg`, normalizedBasePath).href;
+      }
+    } catch (error) {
+      // Ignore URL construction errors and fall back to string concatenation.
+    }
+    return `${normalizedBasePath}${iconName}.svg`;
+  }
+
+  /**
+   * Whether verbose icon diagnostics should be logged.
+   * @private
+   * @returns {boolean}
+   */
+  static isDebugLoggingEnabled() {
+    return Boolean(
+      PDS?.debug === true ||
+      PDS?.compiled?.config?.design?.debug === true ||
+      PDS?.compiled?.options?.design?.debug === true ||
+      PDS?.currentConfig?.design?.debug === true
+    );
+  }
+
   /**
    * Fetch an external SVG icon and cache it
    * @param {string} iconName - The icon name (without .svg extension)
    * @returns {Promise<boolean>} True if successfully fetched
    */
-  static async fetchExternalIcon(iconName) {
+  static async fetchExternalIcon(iconName, basePath) {
     if (!iconName || typeof document === 'undefined') {
       return false;
     }
 
+    const normalizedBasePath = SvgIcon.normalizeExternalIconPath(basePath);
+    const cacheKey = SvgIcon.getExternalIconCacheKey(iconName, normalizedBasePath);
+
     // Check if already cached
-    const cached = SvgIcon.externalIconCache.get(iconName);
+    const cached = SvgIcon.externalIconCache.get(cacheKey);
     if (cached) {
       return cached.loaded;
     }
 
     // Check if fetch is already in progress
-    if (SvgIcon.externalIconPromises.has(iconName)) {
-      return SvgIcon.externalIconPromises.get(iconName);
+    if (SvgIcon.externalIconPromises.has(cacheKey)) {
+      return SvgIcon.externalIconPromises.get(cacheKey);
     }
 
-    const basePath = SvgIcon.getExternalIconPath();
-    const iconUrl = `${basePath}${iconName}.svg`;
+    const iconUrl = SvgIcon.getExternalIconURL(iconName, normalizedBasePath);
+
+    if (SvgIcon.isDebugLoggingEnabled() && !SvgIcon.externalPathDebugLogged.has(normalizedBasePath)) {
+      SvgIcon.externalPathDebugLogged.add(normalizedBasePath);
+      console.debug('[pds-icon] Resolved external icon base path:', normalizedBasePath, 'example URL:', iconUrl);
+    }
 
     const promise = fetch(iconUrl)
       .then(async (response) => {
@@ -649,7 +724,7 @@ export class SvgIcon extends HTMLElement {
           .map((node) => serializer.serializeToString(node))
           .join('');
 
-        SvgIcon.externalIconCache.set(iconName, {
+        SvgIcon.externalIconCache.set(cacheKey, {
           loaded: true,
           error: false,
           content,
@@ -665,7 +740,7 @@ export class SvgIcon extends HTMLElement {
         if (!error.message?.includes('404')) {
           console.debug('[pds-icon] External icon not found:', iconName, error.message);
         }
-        SvgIcon.externalIconCache.set(iconName, {
+        SvgIcon.externalIconCache.set(cacheKey, {
           loaded: false,
           error: true,
           content: null,
@@ -676,10 +751,10 @@ export class SvgIcon extends HTMLElement {
         return false;
       })
       .finally(() => {
-        SvgIcon.externalIconPromises.delete(iconName);
+        SvgIcon.externalIconPromises.delete(cacheKey);
       });
 
-    SvgIcon.externalIconPromises.set(iconName, promise);
+    SvgIcon.externalIconPromises.set(cacheKey, promise);
     return promise;
   }
 

package/public/assets/pds/components/pds-live-importer.js

@@ -262,12 +262,12 @@ class PdsLiveImporter extends HTMLElement {
       ? entry.unknownTailwindTokens
       : [];
     const notesHtml = notes.length
-      ? `<ul class="stack-xs">${notes
+      ? `<ul>${notes
           .map((note) => `<li>${escapeHtml(note)}</li>`)
           .join("")}</ul>`
       : "none";
     const issuesHtml = issueCount
-      ? `<ul class="stack-xs">${entry.issues
+      ? `<ul>${entry.issues
           .map(
             (issue) =>
               `<li><strong>${escapeHtml(issue?.severity || "info")}</strong>: ${escapeHtml(issue?.message || "")}</li>`

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

@@ -348,8 +348,33 @@ class PdsScrollrow extends HTMLElement {
   #updateControls() {
     const el = this.#viewport;
     if (!el) return;
-    const atStart = el.scrollLeft <= 2;
-    const atEnd = Math.ceil(el.scrollLeft + el.clientWidth) >= el.scrollWidth - 2;
+
+    const computed = getComputedStyle(el);
+    const padStart = parseFloat(computed.paddingInlineStart) || 0;
+    const padEnd = parseFloat(computed.paddingInlineEnd) || 0;
+
+    const maxScroll = Math.max(0, el.scrollWidth - el.clientWidth);
+    const dir = computed.direction;
+    let position = el.scrollLeft;
+
+    if (dir === "rtl") {
+      position = position < 0 ? -position : maxScroll - position;
+    }
+
+    position = Math.min(maxScroll, Math.max(0, position));
+
+    const baseThreshold = 2;
+    const startThreshold = Math.max(baseThreshold, Math.ceil(padStart) + 1);
+    const endThreshold = Math.max(baseThreshold, Math.ceil(padEnd) + 1);
+
+    let atStart = position <= startThreshold;
+    let atEnd = maxScroll - position <= endThreshold;
+
+    if (maxScroll <= Math.max(startThreshold, endThreshold)) {
+      atStart = true;
+      atEnd = true;
+    }
+
     this.classList.toggle("can-scroll-left", !atStart);
     this.classList.toggle("can-scroll-right", !atEnd);
     const buttons = this.shadowRoot.querySelectorAll(".control button");