le-kit 0.1.12 → 0.1.13

package/dist/core/components/le-turntable.js

@@ -0,0 +1,164 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const leTurntableCss = ":host{display:block;cursor:grab}div.turntable{width:100%;height:100%;padding:1px}";
+
+const LeTurntable$1 = /*@__PURE__*/ proxyCustomElement(class LeTurntable extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    // transform origin
+    // gets the same values as transform-origin css property
+    center = 'center';
+    // transform rotate
+    value = 0;
+    updateValue(newValue) {
+        if (!this.rotating) {
+            this.currentAngle = parseFloat(newValue);
+            this.setAngle(this.currentAngle);
+        }
+    }
+    /**
+     * Internal state
+     *
+     * using properties instead of @State decoratorm
+     * because we are only changing styles of the element and don't
+     * need the element to be rerendered
+     */
+    // indicates is the element being manually rotated right now
+    rotating = false;
+    // coordinates of the transform origin in pixels
+    centerX;
+    centerY;
+    // element page (body?) offset in pixels
+    pageX;
+    pageY;
+    currentAngle = 0;
+    // angle at the start of the drag
+    startAngle;
+    /**
+     * Event listeners
+     */
+    handleMouseDown(evt) {
+        // set rotating mode on
+        this.rotating = true;
+        // get start angle
+        //   getting pageX/Y, because when the element is transformed
+        //   relative values are useless
+        this.startAngle = this.getAngle(evt.pageX, evt.pageY);
+        // cancel the event to prevent text selection
+        evt.preventDefault();
+        evt.stopPropagation();
+        return false;
+    }
+    /**
+     * Fires when the mouse moves
+     * checks is the element rotating right now and if it is
+     * then calc the current angle and rotate the element
+     *
+     * TODO: attach events only after the dragStart?
+     */
+    handleMouseMove(evt) {
+        if (this.rotating) {
+            // calc angle update and rotate element
+            this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));
+            return false;
+        }
+    }
+    handleMouseUp(evt) {
+        if (this.rotating) {
+            const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);
+            this.setAngle(angle);
+            this.currentAngle = angle;
+            this.rotating = false;
+            return false;
+        }
+    }
+    // on window resize the center should be recalculated
+    handleWindowResize() {
+        this.getTransformOrigin();
+    }
+    /**
+     * Component lifecycles
+     */
+    componentDidLoad() {
+        this.el.style.transformOrigin = this.center;
+        this.currentAngle = this.value;
+        this.getTransformOrigin();
+        this.setAngle(this.currentAngle);
+    }
+    componentDidUpdate() {
+        this.getTransformOrigin();
+    }
+    /**
+     * Calculates the transform origin of the component
+     * and the page offset in pixels
+     *
+     * We'll need these values to calculate the angle of pointer event
+     */
+    getTransformOrigin() {
+        // transform origin
+        [this.centerX, this.centerY] = window
+            .getComputedStyle(this.el, null)
+            .transformOrigin.split(' ')
+            .map(val => Math.round(parseFloat(val)));
+        // page offset
+        let t = null;
+        const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;
+        const clientRects = this.el.getBoundingClientRect();
+        this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);
+        this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);
+    }
+    /**
+     * Calculates current angle
+     *
+     * @param {number} posX  horizontal mouse position
+     * @param {number} posY  vertical mouse position
+     */
+    getAngle(posX, posY) {
+        const x = posX - this.pageX - this.centerX;
+        const y = posY - this.pageY - this.centerY;
+        const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;
+        return angle;
+    }
+    setAngle(angle) {
+        this.el.style.transform = `rotate(${angle}deg)`;
+    }
+    render() {
+        return (h("div", { key: '6ac04c3dfb7d2cd26000d1497122fc8c9ba775d3', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: '18bb701a32e9b3be8e3522351bec99b74d29335d' })));
+    }
+    static get watchers() { return {
+        "value": ["updateValue"]
+    }; }
+    static get style() { return leTurntableCss; }
+}, [769, "le-turntable", {
+        "center": [1],
+        "value": [2]
+    }, [[9, "mousemove", "handleMouseMove"], [9, "mouseup", "handleMouseUp"], [9, "resize", "handleWindowResize"]], {
+        "value": ["updateValue"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-turntable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-turntable":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeTurntable$1);
+            }
+            break;
+    } });
+}
+
+const LeTurntable = LeTurntable$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeTurntable, defineCustomElement };
+//# sourceMappingURL=le-turntable.js.map
+
+//# sourceMappingURL=le-turntable.js.map

package/dist/core/components/le-turntable.js.map

@@ -0,0 +1 @@
+{"file":"le-turntable.js","mappings":"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","names":["LeTurntable","__stencil_proxyCustomElement"],"sources":["src-core/components/le-turntable/le-turntable.css?tag=le-turntable&encapsulation=shadow","src-core/components/le-turntable/le-turntable.tsx"],"sourcesContent":[":host {\n  display: block;\n  cursor: grab;\n}\n\ndiv.turntable {\n  width: 100%;\n  height: 100%;\n  padding: 1px;\n}\n","import { Component, Element, Prop, Listen, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-turntable',\n  styleUrl: 'le-turntable.css',\n  shadow: true,\n})\nexport class LeTurntable {\n  // host element\n  @Element() el: HTMLElement;\n\n  // transform origin\n  // gets the same values as transform-origin css property\n  @Prop() center: string = 'center';\n\n  // transform rotate\n  @Prop() value: number = 0;\n\n  @Watch('value')\n  updateValue(newValue) {\n    if (!this.rotating) {\n      this.currentAngle = parseFloat(newValue);\n      this.setAngle(this.currentAngle);\n    }\n  }\n\n  /**\n   * Internal state\n   *\n   * using properties instead of @State decoratorm\n   * because we are only changing styles of the element and don't\n   * need the element to be rerendered\n   */\n\n  // indicates is the element being manually rotated right now\n  rotating = false;\n\n  // coordinates of the transform origin in pixels\n  centerX: number;\n  centerY: number;\n\n  // element page (body?) offset in pixels\n  pageX: number;\n  pageY: number;\n\n  currentAngle: number = 0;\n  // angle at the start of the drag\n  startAngle: number;\n\n  /**\n   * Event listeners\n   */\n  handleMouseDown(evt: MouseEvent) {\n    // set rotating mode on\n    this.rotating = true;\n\n    // get start angle\n    //   getting pageX/Y, because when the element is transformed\n    //   relative values are useless\n    this.startAngle = this.getAngle(evt.pageX, evt.pageY);\n\n    // cancel the event to prevent text selection\n    evt.preventDefault();\n    evt.stopPropagation();\n    return false;\n  }\n\n  /**\n   * Fires when the mouse moves\n   * checks is the element rotating right now and if it is\n   * then calc the current angle and rotate the element\n   *\n   * TODO: attach events only after the dragStart?\n   */\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(evt: MouseEvent) {\n    if (this.rotating) {\n      // calc angle update and rotate element\n      this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));\n      return false;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp(evt: MouseEvent) {\n    if (this.rotating) {\n      const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);\n      this.setAngle(angle);\n      this.currentAngle = angle;\n      this.rotating = false;\n      return false;\n    }\n  }\n\n  // on window resize the center should be recalculated\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Component lifecycles\n   */\n  componentDidLoad() {\n    this.el.style.transformOrigin = this.center;\n    this.currentAngle = this.value;\n\n    this.getTransformOrigin();\n    this.setAngle(this.currentAngle);\n  }\n\n  componentDidUpdate() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Calculates the transform origin of the component\n   * and the page offset in pixels\n   *\n   * We'll need these values to calculate the angle of pointer event\n   */\n  getTransformOrigin() {\n    // transform origin\n    [this.centerX, this.centerY] = window\n      .getComputedStyle(this.el, null)\n      .transformOrigin.split(' ')\n      .map(val => Math.round(parseFloat(val)));\n    // page offset\n    let t = null;\n    const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;\n    const clientRects = this.el.getBoundingClientRect();\n    this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);\n    this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);\n  }\n\n  /**\n   * Calculates current angle\n   *\n   * @param {number} posX  horizontal mouse position\n   * @param {number} posY  vertical mouse position\n   */\n  getAngle(posX: number, posY: number) {\n    const x = posX - this.pageX - this.centerX;\n    const y = posY - this.pageY - this.centerY;\n    const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;\n    return angle;\n  }\n\n  setAngle(angle) {\n    this.el.style.transform = `rotate(${angle}deg)`;\n  }\n\n  render() {\n    return (\n      <div class=\"turntable\" onMouseDown={this.handleMouseDown.bind(this)}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/core/components/utils.js

@@ -0,0 +1,310 @@
+import { setMode } from '@stencil/core/internal/client';
+
+/**
+ * Global mode initialization for le-kit components.
+ *
+ * Mode inheritance works as follows:
+ * 1. Check the element's own `mode` attribute
+ * 2. Traverse up the DOM to find a parent with `mode` attribute
+ * 3. Check the document root element (html) for `mode` attribute
+ * 4. Fall back to 'default'
+ *
+ * This allows setting mode at any level:
+ * - `<html mode="admin">` - all components in admin mode
+ * - `<le-card mode="admin">` - this card and its children in admin mode
+ */
+function initializeMode() {
+    setMode((el) => {
+        // 1. Check element's own mode attribute
+        const ownMode = el.getAttribute('mode');
+        if (ownMode) {
+            return ownMode;
+        }
+        // 2. Traverse up the DOM tree to find inherited mode
+        let parent = el.parentElement;
+        while (parent) {
+            const parentMode = parent.getAttribute('mode');
+            if (parentMode) {
+                return parentMode;
+            }
+            parent = parent.parentElement;
+        }
+        // 3. Check document root element
+        const rootMode = document.documentElement.getAttribute('mode');
+        if (rootMode) {
+            return rootMode;
+        }
+        // 4. Default mode
+        return 'default';
+    });
+}
+/**
+ * Helper function to get the current mode for an element.
+ * Can be used programmatically in components.
+ *
+ * This function traverses both regular DOM and shadow DOM boundaries
+ * to find the nearest mode attribute.
+ */
+function getMode(el) {
+    // Check element's own mode
+    const ownMode = el.getAttribute('mode');
+    if (ownMode) {
+        return ownMode;
+    }
+    // Traverse up DOM, crossing shadow boundaries
+    let current = el;
+    while (current) {
+        // Try parent element first
+        if (current instanceof Element && current.parentElement) {
+            current = current.parentElement;
+            const mode = current.getAttribute?.('mode');
+            if (mode) {
+                return mode;
+            }
+        }
+        else {
+            // No parent element - check if we're in a shadow root
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                // Cross the shadow boundary to the host element
+                current = root.host;
+                const mode = current.getAttribute?.('mode');
+                if (mode) {
+                    return mode;
+                }
+            }
+            else {
+                // We've reached the document root
+                break;
+            }
+        }
+    }
+    // Check document root
+    const rootMode = document.documentElement.getAttribute('mode');
+    if (rootMode) {
+        return rootMode;
+    }
+    return 'default';
+}
+/**
+ * Helper function to get the current theme for an element.
+ * Theme inheritance works the same as mode - cascades through DOM.
+ */
+function getTheme(el) {
+    // Check element's own theme
+    const ownTheme = el.getAttribute('theme');
+    if (ownTheme) {
+        return ownTheme;
+    }
+    // Traverse up DOM
+    let parent = el.parentElement;
+    while (parent) {
+        const parentTheme = parent.getAttribute('theme');
+        if (parentTheme) {
+            return parentTheme;
+        }
+        parent = parent.parentElement;
+    }
+    // Check root
+    const rootTheme = document.documentElement.getAttribute('theme');
+    if (rootTheme) {
+        return rootTheme;
+    }
+    return 'default';
+}
+/**
+ * Helper function to set mode on the document root.
+ * Useful for switching all components to admin mode.
+ */
+function setGlobalMode(mode) {
+    document.documentElement.setAttribute('mode', mode);
+}
+/**
+ * Helper function to set theme on the document root.
+ * Useful for switching all components to a different theme.
+ */
+function setGlobalTheme(theme) {
+    document.documentElement.setAttribute('theme', theme);
+}
+/**
+ * Global configuration for le-kit
+ */
+let leKitConfig = {
+    /**
+     * URL to the custom-elements.json manifest.
+     * Used by admin components (le-component, le-slot) to load component metadata.
+     *
+     * Default: '/custom-elements.json' (served from app root)
+     *
+     * For apps using le-kit, you may need to:
+     * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder
+     * 2. Or set this to point to where the manifest is served
+     */
+    manifestUrl: '/custom-elements.json',
+};
+/**
+ * Configure le-kit global settings.
+ *
+ * @example
+ * ```ts
+ * import { configureLeki } from 'le-kit';
+ *
+ * configureLeki({
+ *   manifestUrl: '/assets/custom-elements.json'
+ * });
+ * ```
+ */
+function configureLeKit(config) {
+    leKitConfig = { ...leKitConfig, ...config };
+}
+/**
+ * Get the current le-kit configuration.
+ */
+function getLeKitConfig() {
+    return leKitConfig;
+}
+
+/**
+ * Utility functions for le-kit components
+ */
+/**
+ * Generates a unique ID for component instances
+ */
+function generateId(prefix = 'le') {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+}
+/**
+ * Parses a comma-separated string into an array
+ */
+function parseCommaSeparated(value) {
+    if (!value)
+        return [];
+    return value
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+}
+/**
+ * Checks if a slot has content
+ */
+function slotHasContent(el, slotName = '') {
+    const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
+    return el.querySelector(selector) !== null;
+}
+/**
+ * Sets up a MutationObserver to track mode changes on ancestor elements.
+ * Returns a cleanup function to disconnect the observer.
+ *
+ * If the element or any ancestor has an explicit `mode` attribute, that creates
+ * a "mode boundary" - the mode is determined from that point, not from further up.
+ * This allows components like le-popover to force default mode for their children.
+ *
+ * @param el - The component's host element
+ * @param callback - Function to call when mode changes, receives the new mode
+ * @returns Cleanup function to disconnect the observer
+ *
+ * @example
+ * ```tsx
+ * export class MyComponent {
+ *   @Element() el: HTMLElement;
+ *   @State() adminMode: boolean = false;
+ *   private disconnectModeObserver?: () => void;
+ *
+ *   connectedCallback() {
+ *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+ *       this.adminMode = mode === 'admin';
+ *     });
+ *   }
+ *
+ *   disconnectedCallback() {
+ *     this.disconnectModeObserver?.();
+ *   }
+ * }
+ * ```
+ */
+function observeModeChanges(el, callback) {
+    // Call immediately with current mode
+    callback(getMode(el));
+    // Set up observer for mode attribute changes
+    const observer = new MutationObserver(() => {
+        callback(getMode(el));
+    });
+    // Observe the element itself (for mode boundary changes)
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: ['mode'],
+    });
+    // Observe document root
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['mode'],
+    });
+    // Traverse up, crossing shadow boundaries, and observe each element
+    let current = el;
+    while (current) {
+        if (current instanceof Element && current.parentElement) {
+            current = current.parentElement;
+            observer.observe(current, {
+                attributes: true,
+                attributeFilter: ['mode'],
+            });
+            // If this element has an explicit mode, it's a boundary
+            if (current.hasAttribute('mode')) {
+                break;
+            }
+        }
+        else {
+            // Check if we're in a shadow root
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                // Cross the shadow boundary and observe the host
+                current = root.host;
+                observer.observe(current, {
+                    attributes: true,
+                    attributeFilter: ['mode'],
+                });
+                // If the host has an explicit mode, it's a boundary
+                if (current.hasAttribute('mode')) {
+                    break;
+                }
+            }
+            else {
+                break;
+            }
+        }
+    }
+    // Return cleanup function
+    return () => observer.disconnect();
+}
+/**
+ * Combines multiple class names into a single string, filtering out falsy values.
+ *
+ * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
+ * @returns Combined class names string
+ */
+function classnames(...classes) {
+    const result = [];
+    classes.forEach(cls => {
+        if (!cls)
+            return;
+        if (typeof cls === 'string') {
+            result.push(cls);
+        }
+        else if (Array.isArray(cls)) {
+            result.push(classnames(...cls));
+        }
+        else if (typeof cls === 'object') {
+            Object.entries(cls).forEach(([key, value]) => {
+                if (value) {
+                    result.push(key);
+                }
+            });
+        }
+    });
+    return result.join(' ');
+}
+
+export { getMode as a, setGlobalMode as b, getTheme as c, setGlobalTheme as d, configureLeKit as e, getLeKitConfig as f, generateId as g, classnames as h, initializeMode as i, observeModeChanges as o, parseCommaSeparated as p, slotHasContent as s };
+//# sourceMappingURL=utils.js.map
+
+//# sourceMappingURL=utils.js.map

package/dist/core/components/utils.js.map

@@ -0,0 +1 @@
+{"file":"utils.js","mappings":"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","names":[],"sources":["src-core/global/app.ts","src-core/utils/utils.ts"],"sourcesContent":["import { setMode } from '@stencil/core';\n\nexport type LeKitMode = 'default' | 'admin' | string;\nexport type LeKitTheme = 'default' | 'dark' | string;\n\n/**\n * Global mode initialization for le-kit components.\n *\n * Mode inheritance works as follows:\n * 1. Check the element's own `mode` attribute\n * 2. Traverse up the DOM to find a parent with `mode` attribute\n * 3. Check the document root element (html) for `mode` attribute\n * 4. Fall back to 'default'\n *\n * This allows setting mode at any level:\n * - `<html mode=\"admin\">` - all components in admin mode\n * - `<le-card mode=\"admin\">` - this card and its children in admin mode\n */\nfunction initializeMode() {\n  setMode((el: HTMLElement): LeKitMode => {\n    // 1. Check element's own mode attribute\n    const ownMode = el.getAttribute('mode');\n    if (ownMode) {\n      return ownMode as LeKitMode;\n    }\n\n    // 2. Traverse up the DOM tree to find inherited mode\n    let parent = el.parentElement;\n    while (parent) {\n      const parentMode = parent.getAttribute('mode');\n      if (parentMode) {\n        return parentMode as LeKitMode;\n      }\n      parent = parent.parentElement;\n    }\n\n    // 3. Check document root element\n    const rootMode = document.documentElement.getAttribute('mode');\n    if (rootMode) {\n      return rootMode as LeKitMode;\n    }\n\n    // 4. Default mode\n    return 'default';\n  });\n}\n\n// Default export for Stencil global script\nexport default initializeMode;\n\n/**\n * Helper function to get the current mode for an element.\n * Can be used programmatically in components.\n * \n * This function traverses both regular DOM and shadow DOM boundaries\n * to find the nearest mode attribute.\n */\nexport function getMode(el: HTMLElement): LeKitMode {\n  // Check element's own mode\n  const ownMode = el.getAttribute('mode');\n  if (ownMode) {\n    return ownMode as LeKitMode;\n  }\n\n  // Traverse up DOM, crossing shadow boundaries\n  let current: Node | null = el;\n  while (current) {\n    // Try parent element first\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      const mode = (current as HTMLElement).getAttribute?.('mode');\n      if (mode) {\n        return mode as LeKitMode;\n      }\n    } else {\n      // No parent element - check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary to the host element\n        current = root.host;\n        const mode = (current as HTMLElement).getAttribute?.('mode');\n        if (mode) {\n          return mode as LeKitMode;\n        }\n      } else {\n        // We've reached the document root\n        break;\n      }\n    }\n  }\n\n  // Check document root\n  const rootMode = document.documentElement.getAttribute('mode');\n  if (rootMode) {\n    return rootMode as LeKitMode;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to get the current theme for an element.\n * Theme inheritance works the same as mode - cascades through DOM.\n */\nexport function getTheme(el: HTMLElement): LeKitTheme {\n  // Check element's own theme\n  const ownTheme = el.getAttribute('theme');\n  if (ownTheme) {\n    return ownTheme as LeKitTheme;\n  }\n\n  // Traverse up DOM\n  let parent = el.parentElement;\n  while (parent) {\n    const parentTheme = parent.getAttribute('theme');\n    if (parentTheme) {\n      return parentTheme as LeKitTheme;\n    }\n    parent = parent.parentElement;\n  }\n\n  // Check root\n  const rootTheme = document.documentElement.getAttribute('theme');\n  if (rootTheme) {\n    return rootTheme as LeKitTheme;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to set mode on the document root.\n * Useful for switching all components to admin mode.\n */\nexport function setGlobalMode(mode: LeKitMode): void {\n  document.documentElement.setAttribute('mode', mode);\n}\n\n/**\n * Helper function to set theme on the document root.\n * Useful for switching all components to a different theme.\n */\nexport function setGlobalTheme(theme: LeKitTheme): void {\n  document.documentElement.setAttribute('theme', theme);\n}\n\n/**\n * Global configuration for le-kit\n */\nlet leKitConfig = {\n  /**\n   * URL to the custom-elements.json manifest.\n   * Used by admin components (le-component, le-slot) to load component metadata.\n   * \n   * Default: '/custom-elements.json' (served from app root)\n   * \n   * For apps using le-kit, you may need to:\n   * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder\n   * 2. Or set this to point to where the manifest is served\n   */\n  manifestUrl: '/custom-elements.json',\n};\n\n/**\n * Configure le-kit global settings.\n * \n * @example\n * ```ts\n * import { configureLeki } from 'le-kit';\n * \n * configureLeki({\n *   manifestUrl: '/assets/custom-elements.json'\n * });\n * ```\n */\nexport function configureLeKit(config: Partial<typeof leKitConfig>): void {\n  leKitConfig = { ...leKitConfig, ...config };\n}\n\n/**\n * Get the current le-kit configuration.\n */\nexport function getLeKitConfig(): typeof leKitConfig {\n  return leKitConfig;\n}\n","/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-15T15:28:08",
+  "timestamp": "2025-12-15T16:21:34",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",