@api-client/ui 0.5.58 → 0.6.1

package/build/src/help/help_panel.js

@@ -0,0 +1,323 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import styles from './help_panel.styles.js';
+import mdStyles from '../elements/highlight/MarkdownStyles.js';
+import '../md/icons/ui-icon.js';
+import '../md/icon-button/ui-icon-button.js';
+import '../elements/highlight/marked-highlight.js';
+/**
+ * A panel that displays help content for a specific topic.
+ * This component is used by the HelpCoordinator to show help information.
+ * Uses the popover API to ensure it appears in the top layer.
+ * @fires close - Dispatched when the panel is closed.
+ */
+let HelpPanel = (() => {
+    let _classDecorators = [customElement('help-panel')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LitElement;
+    let _topic_decorators;
+    let _topic_initializers = [];
+    let _topic_extraInitializers = [];
+    let _trigger_decorators;
+    let _trigger_initializers = [];
+    let _trigger_extraInitializers = [];
+    let _opened_decorators;
+    let _opened_initializers = [];
+    let _opened_extraInitializers = [];
+    let _isDragging_decorators;
+    let _isDragging_initializers = [];
+    let _isDragging_extraInitializers = [];
+    let _position_decorators;
+    let _position_initializers = [];
+    let _position_extraInitializers = [];
+    var HelpPanel = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _topic_decorators = [property({ type: Object })];
+            _trigger_decorators = [property({ type: Object })];
+            _opened_decorators = [property({ type: Boolean, reflect: true })];
+            _isDragging_decorators = [state()];
+            _position_decorators = [state()];
+            __esDecorate(this, null, _topic_decorators, { kind: "accessor", name: "topic", static: false, private: false, access: { has: obj => "topic" in obj, get: obj => obj.topic, set: (obj, value) => { obj.topic = value; } }, metadata: _metadata }, _topic_initializers, _topic_extraInitializers);
+            __esDecorate(this, null, _trigger_decorators, { kind: "accessor", name: "trigger", static: false, private: false, access: { has: obj => "trigger" in obj, get: obj => obj.trigger, set: (obj, value) => { obj.trigger = value; } }, metadata: _metadata }, _trigger_initializers, _trigger_extraInitializers);
+            __esDecorate(this, null, _opened_decorators, { kind: "accessor", name: "opened", static: false, private: false, access: { has: obj => "opened" in obj, get: obj => obj.opened, set: (obj, value) => { obj.opened = value; } }, metadata: _metadata }, _opened_initializers, _opened_extraInitializers);
+            __esDecorate(this, null, _isDragging_decorators, { kind: "accessor", name: "isDragging", static: false, private: false, access: { has: obj => "isDragging" in obj, get: obj => obj.isDragging, set: (obj, value) => { obj.isDragging = value; } }, metadata: _metadata }, _isDragging_initializers, _isDragging_extraInitializers);
+            __esDecorate(this, null, _position_decorators, { kind: "accessor", name: "position", static: false, private: false, access: { has: obj => "position" in obj, get: obj => obj.position, set: (obj, value) => { obj.position = value; } }, metadata: _metadata }, _position_initializers, _position_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            HelpPanel = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles, mdStyles];
+        #topic_accessor_storage = __runInitializers(this, _topic_initializers, void 0);
+        /**
+         * The help topic to display in the panel.
+         * This should be set by the HelpCoordinator when a help request is made.
+         */
+        get topic() { return this.#topic_accessor_storage; }
+        set topic(value) { this.#topic_accessor_storage = value; }
+        #trigger_accessor_storage = (__runInitializers(this, _topic_extraInitializers), __runInitializers(this, _trigger_initializers, void 0));
+        /**
+         * The element that triggered the help request.
+         * This is used to position the help panel relative to the triggering element.
+         * Might not always be set, depending on how the help request is triggered.
+         */
+        get trigger() { return this.#trigger_accessor_storage; }
+        set trigger(value) { this.#trigger_accessor_storage = value; }
+        #opened_accessor_storage = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _opened_initializers, false));
+        /**
+         * Whether the panel is currently opened.
+         * This is controlled by the HelpCoordinator and reflects the current state of the panel.
+         */
+        get opened() { return this.#opened_accessor_storage; }
+        set opened(value) { this.#opened_accessor_storage = value; }
+        #isDragging_accessor_storage = (__runInitializers(this, _opened_extraInitializers), __runInitializers(this, _isDragging_initializers, false));
+        get isDragging() { return this.#isDragging_accessor_storage; }
+        set isDragging(value) { this.#isDragging_accessor_storage = value; }
+        #position_accessor_storage = (__runInitializers(this, _isDragging_extraInitializers), __runInitializers(this, _position_initializers, { x: 20, y: 20 }));
+        get position() { return this.#position_accessor_storage; }
+        set position(value) { this.#position_accessor_storage = value; }
+        dragOffset = (__runInitializers(this, _position_extraInitializers), { x: 0, y: 0 });
+        /**
+         * Duration of the opening/closing animation in ms.
+         * This is defined in the css file.
+         */
+        animationDuration = 200;
+        constructor() {
+            super();
+            this.popover = 'manual';
+        }
+        updated(cp) {
+            if (cp.has('opened')) {
+                if (this.opened) {
+                    // @ts-expect-error This is a relatively new API, ensure your TypeScript version supports it
+                    this.showPopover({ source: this.trigger });
+                }
+                else {
+                    this.hidePopover();
+                }
+            }
+        }
+        /**
+         * Handles the popover toggle event
+         */
+        handlePopoverToggle = (event) => {
+            const toggleEvent = event;
+            this.opened = toggleEvent.newState === 'open';
+        };
+        resetPositionAfterAnimation() {
+            setTimeout(() => {
+                this.style.left = 'auto';
+                this.style.top = '20px';
+                this.style.right = '20px';
+                this.position = { x: 20, y: 20 };
+            }, this.animationDuration + 1); // Add 1ms to ensure it runs after the transition
+        }
+        renderMarkdown(md) {
+            if (!md) {
+                return nothing;
+            }
+            return html `<marked-highlight .markdown="${md}"><div slot="markdown-html"></div></marked-highlight>`;
+        }
+        /**
+         * Handles the close event for the help panel.
+         * Dispatches a custom 'close' event and sets the opened state to false.
+         * The event informs the help coordinator or any parent component that the panel has been closed.
+         */
+        handleClose() {
+            this.dispatchEvent(new CustomEvent('close'));
+            this.opened = false;
+        }
+        /**
+         * Handles the start of a drag operation.
+         * Only initiates drag if not clicking on interactive elements or text content.
+         */
+        handleMouseDown(event) {
+            // Don't drag if clicking on interactive elements
+            const target = event.target;
+            if (target.closest('ui-icon-button, a, button, input, textarea, [contenteditable]')) {
+                return;
+            }
+            // Only drag when clicking on header padding or non-text areas
+            const clickedOnHeader = target.closest('.header');
+            const clickedOnPadding = target.matches('.content-wrapper, .content') && this.isClickOnPadding(event, target);
+            if (!clickedOnHeader && !clickedOnPadding) {
+                return;
+            }
+            this.isDragging = true;
+            const rect = this.getBoundingClientRect();
+            this.dragOffset = {
+                x: event.clientX - rect.left,
+                y: event.clientY - rect.top,
+            };
+            // Prevent text selection during drag
+            event.preventDefault();
+            // Add global event listeners
+            document.addEventListener('mousemove', this.handleMouseMove);
+            document.addEventListener('mouseup', this.handleMouseUp);
+            // Add dragging class for visual feedback
+            this.style.cursor = 'grabbing';
+        }
+        /**
+         * Checks if the click is on padding area (not on text content)
+         */
+        isClickOnPadding(event, element) {
+            const rect = element.getBoundingClientRect();
+            const clickX = event.clientX - rect.left;
+            const clickY = event.clientY - rect.top;
+            // Check if click is in padding areas (first/last 16px of padding)
+            const paddingThreshold = 16;
+            return (clickX < paddingThreshold ||
+                clickX > rect.width - paddingThreshold ||
+                clickY < paddingThreshold ||
+                clickY > rect.height - paddingThreshold);
+        }
+        /**
+         * Handles mouse movement during drag operation.
+         */
+        handleMouseMove = (event) => {
+            if (!this.isDragging)
+                return;
+            // Calculate new position
+            const newX = event.clientX - this.dragOffset.x;
+            const newY = event.clientY - this.dragOffset.y;
+            // Get viewport dimensions
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const rect = this.getBoundingClientRect();
+            // Constrain to viewport bounds
+            const constrainedX = Math.max(0, Math.min(newX, viewportWidth - rect.width));
+            const constrainedY = Math.max(0, Math.min(newY, viewportHeight - rect.height));
+            // Update position
+            this.position = { x: constrainedX, y: constrainedY };
+            this.style.left = `${constrainedX}px`;
+            this.style.top = `${constrainedY}px`;
+            this.style.right = 'auto'; // Override the CSS right positioning
+        };
+        /**
+         * Handles the end of a drag operation.
+         */
+        handleMouseUp = () => {
+            if (!this.isDragging)
+                return;
+            this.isDragging = false;
+            this.style.cursor = '';
+            // Remove global event listeners
+            document.removeEventListener('mousemove', this.handleMouseMove);
+            document.removeEventListener('mouseup', this.handleMouseUp);
+        };
+        connectedCallback() {
+            super.connectedCallback();
+            // Set up popover behavior
+            this.setAttribute('popover', 'manual');
+            // Listen for popover toggle events
+            this.addEventListener('toggle', this.handlePopoverToggle);
+        }
+        firstUpdated() {
+            // Set up scroll listener for scroll shadows
+            const contentWrapper = this.shadowRoot?.querySelector('.content-wrapper');
+            if (contentWrapper) {
+                // Initial scroll state check
+                this.updateScrollShadows(contentWrapper);
+            }
+        }
+        /**
+         * Updates scroll shadow opacity based on scroll position
+         */
+        handleScroll = (event) => {
+            const element = event.target;
+            this.updateScrollShadows(element);
+        };
+        updateScrollShadows(element) {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+            const maxScroll = scrollHeight - clientHeight;
+            // Calculate scroll shadow opacity (0-1)
+            const scrollTopOpacity = Math.min(scrollTop / 20, 1); // Fade in over first 20px
+            const scrollBottomOpacity = Math.min((maxScroll - scrollTop) / 20, 1); // Fade out over last 20px
+            // Only show bottom shadow if content is actually scrollable
+            const bottomOpacity = maxScroll > 0 ? Math.min(scrollBottomOpacity, 1) : 0;
+            // Update CSS custom properties
+            element.style.setProperty('--scroll-top', scrollTopOpacity.toString());
+            element.style.setProperty('--scroll-bottom', bottomOpacity.toString());
+            // Update host attribute for header styling
+            if (scrollTop > 5) {
+                this.setAttribute('data-scrolled', '');
+            }
+            else {
+                this.removeAttribute('data-scrolled');
+            }
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            // Clean up event listeners
+            document.removeEventListener('mousemove', this.handleMouseMove);
+            document.removeEventListener('mouseup', this.handleMouseUp);
+            this.removeEventListener('toggle', this.handlePopoverToggle);
+        }
+        render() {
+            if (!this.topic) {
+                return nothing;
+            }
+            return html `
+      <div class="header" @mousedown="${this.handleMouseDown}">
+        <span class="title">${this.topic.title}</span>
+        <ui-icon-button @click="${this.handleClose}" aria-label="Close help panel">
+          <ui-icon>close</ui-icon>
+        </ui-icon-button>
+      </div>
+      <div class="content-wrapper" @mousedown="${this.handleMouseDown}" @scroll="${this.handleScroll}">
+        <div class="content">
+          ${this.renderMarkdown(this.topic.body)} ${this.renderExamples(this.topic.examples)}
+          ${this.topic.links && this.topic.links.length > 0
+                ? html `
+                <div class="links">
+                  <h3>Related Links</h3>
+                  <ul>
+                    ${this.topic.links.map((link) => html `<li>
+                          <a href="${link.url}" target="_blank" rel="noopener noreferrer"
+                            >${link.text}
+                            <ui-icon style="font-size: 1em; vertical-align: middle;">open_in_new</ui-icon></a
+                          >
+                        </li>`)}
+                  </ul>
+                </div>
+              `
+                : nothing}
+        </div>
+      </div>
+    `;
+        }
+        /**
+         * Renders examples section, handling both string and array formats
+         */
+        renderExamples(examples) {
+            if (!examples) {
+                return nothing;
+            }
+            // Handle legacy string format
+            if (typeof examples === 'string') {
+                return html `<h3>Examples</h3>
+        ${this.renderMarkdown(examples)}`;
+            }
+            // Handle new array format
+            if (Array.isArray(examples) && examples.length > 0) {
+                return html `
+        <h3>Examples</h3>
+        ${examples.map((example) => html `
+            ${example.title ? html `<h4>${example.title}</h4>` : nothing} ${this.renderMarkdown(example.value)}
+          `)}
+      `;
+            }
+            return nothing;
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return HelpPanel = _classThis;
+})();
+export { HelpPanel };
+//# sourceMappingURL=help_panel.js.map

package/build/src/help/help_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help_panel.js","sourceRoot":"","sources":["../../../src/help/help_panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing, type TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport type { HelpTopic, HelpExample } from './help_topic.js'\nimport styles from './help_panel.styles.js'\nimport mdStyles from '../elements/highlight/MarkdownStyles.js'\n\nimport '../md/icons/ui-icon.js'\nimport '../md/icon-button/ui-icon-button.js'\nimport '../elements/highlight/marked-highlight.js'\n\n// Type definition for ToggleEvent (may not be available in all TypeScript versions)\ninterface ToggleEvent extends Event {\n  readonly newState: 'open' | 'closed'\n  readonly oldState: 'open' | 'closed'\n}\n\n/**\n * A panel that displays help content for a specific topic.\n * This component is used by the HelpCoordinator to show help information.\n * Uses the popover API to ensure it appears in the top layer.\n * @fires close - Dispatched when the panel is closed.\n */\n@customElement('help-panel')\nexport class HelpPanel extends LitElement {\n  static override styles = [styles, mdStyles]\n\n  /**\n   * The help topic to display in the panel.\n   * This should be set by the HelpCoordinator when a help request is made.\n   */\n  @property({ type: Object }) accessor topic: HelpTopic | undefined\n  /**\n   * The element that triggered the help request.\n   * This is used to position the help panel relative to the triggering element.\n   * Might not always be set, depending on how the help request is triggered.\n   */\n  @property({ type: Object }) accessor trigger: HTMLElement | undefined\n  /**\n   * Whether the panel is currently opened.\n   * This is controlled by the HelpCoordinator and reflects the current state of the panel.\n   */\n  @property({ type: Boolean, reflect: true }) accessor opened = false\n\n  @state() private accessor isDragging = false\n  @state() private accessor position = { x: 20, y: 20 }\n\n  private dragOffset = { x: 0, y: 0 }\n  /**\n   * Duration of the opening/closing animation in ms.\n   * This is defined in the css file.\n   */\n  protected animationDuration = 200\n\n  constructor() {\n    super()\n    this.popover = 'manual'\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    if (cp.has('opened')) {\n      if (this.opened) {\n        // @ts-expect-error This is a relatively new API, ensure your TypeScript version supports it\n        this.showPopover({ source: this.trigger })\n      } else {\n        this.hidePopover()\n      }\n    }\n  }\n\n  /**\n   * Handles the popover toggle event\n   */\n  private handlePopoverToggle = (event: Event): void => {\n    const toggleEvent = event as ToggleEvent\n    this.opened = toggleEvent.newState === 'open'\n  }\n\n  resetPositionAfterAnimation(): void {\n    setTimeout(() => {\n      this.style.left = 'auto'\n      this.style.top = '20px'\n      this.style.right = '20px'\n      this.position = { x: 20, y: 20 }\n    }, this.animationDuration + 1) // Add 1ms to ensure it runs after the transition\n  }\n\n  private renderMarkdown(md: string | undefined): TemplateResult | typeof nothing {\n    if (!md) {\n      return nothing\n    }\n    return html`<marked-highlight .markdown=\"${md}\"><div slot=\"markdown-html\"></div></marked-highlight>`\n  }\n\n  /**\n   * Handles the close event for the help panel.\n   * Dispatches a custom 'close' event and sets the opened state to false.\n   * The event informs the help coordinator or any parent component that the panel has been closed.\n   */\n  protected handleClose(): void {\n    this.dispatchEvent(new CustomEvent('close'))\n    this.opened = false\n  }\n\n  /**\n   * Handles the start of a drag operation.\n   * Only initiates drag if not clicking on interactive elements or text content.\n   */\n  protected handleMouseDown(event: MouseEvent): void {\n    // Don't drag if clicking on interactive elements\n    const target = event.target as Element\n    if (target.closest('ui-icon-button, a, button, input, textarea, [contenteditable]')) {\n      return\n    }\n\n    // Only drag when clicking on header padding or non-text areas\n    const clickedOnHeader = target.closest('.header')\n    const clickedOnPadding =\n      target.matches('.content-wrapper, .content') && this.isClickOnPadding(event, target as HTMLElement)\n\n    if (!clickedOnHeader && !clickedOnPadding) {\n      return\n    }\n\n    this.isDragging = true\n\n    const rect = this.getBoundingClientRect()\n    this.dragOffset = {\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n    }\n\n    // Prevent text selection during drag\n    event.preventDefault()\n\n    // Add global event listeners\n    document.addEventListener('mousemove', this.handleMouseMove)\n    document.addEventListener('mouseup', this.handleMouseUp)\n\n    // Add dragging class for visual feedback\n    this.style.cursor = 'grabbing'\n  }\n\n  /**\n   * Checks if the click is on padding area (not on text content)\n   */\n  private isClickOnPadding(event: MouseEvent, element: HTMLElement): boolean {\n    const rect = element.getBoundingClientRect()\n    const clickX = event.clientX - rect.left\n    const clickY = event.clientY - rect.top\n\n    // Check if click is in padding areas (first/last 16px of padding)\n    const paddingThreshold = 16\n    return (\n      clickX < paddingThreshold ||\n      clickX > rect.width - paddingThreshold ||\n      clickY < paddingThreshold ||\n      clickY > rect.height - paddingThreshold\n    )\n  }\n\n  /**\n   * Handles mouse movement during drag operation.\n   */\n  private handleMouseMove = (event: MouseEvent): void => {\n    if (!this.isDragging) return\n\n    // Calculate new position\n    const newX = event.clientX - this.dragOffset.x\n    const newY = event.clientY - this.dragOffset.y\n\n    // Get viewport dimensions\n    const viewportWidth = window.innerWidth\n    const viewportHeight = window.innerHeight\n    const rect = this.getBoundingClientRect()\n\n    // Constrain to viewport bounds\n    const constrainedX = Math.max(0, Math.min(newX, viewportWidth - rect.width))\n    const constrainedY = Math.max(0, Math.min(newY, viewportHeight - rect.height))\n\n    // Update position\n    this.position = { x: constrainedX, y: constrainedY }\n    this.style.left = `${constrainedX}px`\n    this.style.top = `${constrainedY}px`\n    this.style.right = 'auto' // Override the CSS right positioning\n  }\n\n  /**\n   * Handles the end of a drag operation.\n   */\n  private handleMouseUp = (): void => {\n    if (!this.isDragging) return\n\n    this.isDragging = false\n    this.style.cursor = ''\n\n    // Remove global event listeners\n    document.removeEventListener('mousemove', this.handleMouseMove)\n    document.removeEventListener('mouseup', this.handleMouseUp)\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    // Set up popover behavior\n    this.setAttribute('popover', 'manual')\n\n    // Listen for popover toggle events\n    this.addEventListener('toggle', this.handlePopoverToggle)\n  }\n\n  override firstUpdated(): void {\n    // Set up scroll listener for scroll shadows\n    const contentWrapper = this.shadowRoot?.querySelector('.content-wrapper') as HTMLElement\n    if (contentWrapper) {\n      // Initial scroll state check\n      this.updateScrollShadows(contentWrapper)\n    }\n  }\n\n  /**\n   * Updates scroll shadow opacity based on scroll position\n   */\n  private handleScroll = (event: Event): void => {\n    const element = event.target as HTMLElement\n    this.updateScrollShadows(element)\n  }\n\n  private updateScrollShadows(element: HTMLElement): void {\n    const { scrollTop, scrollHeight, clientHeight } = element\n    const maxScroll = scrollHeight - clientHeight\n\n    // Calculate scroll shadow opacity (0-1)\n    const scrollTopOpacity = Math.min(scrollTop / 20, 1) // Fade in over first 20px\n    const scrollBottomOpacity = Math.min((maxScroll - scrollTop) / 20, 1) // Fade out over last 20px\n\n    // Only show bottom shadow if content is actually scrollable\n    const bottomOpacity = maxScroll > 0 ? Math.min(scrollBottomOpacity, 1) : 0\n\n    // Update CSS custom properties\n    element.style.setProperty('--scroll-top', scrollTopOpacity.toString())\n    element.style.setProperty('--scroll-bottom', bottomOpacity.toString())\n\n    // Update host attribute for header styling\n    if (scrollTop > 5) {\n      this.setAttribute('data-scrolled', '')\n    } else {\n      this.removeAttribute('data-scrolled')\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    // Clean up event listeners\n    document.removeEventListener('mousemove', this.handleMouseMove)\n    document.removeEventListener('mouseup', this.handleMouseUp)\n    this.removeEventListener('toggle', this.handlePopoverToggle)\n  }\n\n  override render() {\n    if (!this.topic) {\n      return nothing\n    }\n    return html`\n      <div class=\"header\" @mousedown=\"${this.handleMouseDown}\">\n        <span class=\"title\">${this.topic.title}</span>\n        <ui-icon-button @click=\"${this.handleClose}\" aria-label=\"Close help panel\">\n          <ui-icon>close</ui-icon>\n        </ui-icon-button>\n      </div>\n      <div class=\"content-wrapper\" @mousedown=\"${this.handleMouseDown}\" @scroll=\"${this.handleScroll}\">\n        <div class=\"content\">\n          ${this.renderMarkdown(this.topic.body)} ${this.renderExamples(this.topic.examples)}\n          ${this.topic.links && this.topic.links.length > 0\n            ? html`\n                <div class=\"links\">\n                  <h3>Related Links</h3>\n                  <ul>\n                    ${this.topic.links.map(\n                      (link) =>\n                        html`<li>\n                          <a href=\"${link.url}\" target=\"_blank\" rel=\"noopener noreferrer\"\n                            >${link.text}\n                            <ui-icon style=\"font-size: 1em; vertical-align: middle;\">open_in_new</ui-icon></a\n                          >\n                        </li>`\n                    )}\n                  </ul>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `\n  }\n\n  /**\n   * Renders examples section, handling both string and array formats\n   */\n  private renderExamples(examples: string | HelpExample[] | undefined): TemplateResult | typeof nothing {\n    if (!examples) {\n      return nothing\n    }\n\n    // Handle legacy string format\n    if (typeof examples === 'string') {\n      return html`<h3>Examples</h3>\n        ${this.renderMarkdown(examples)}`\n    }\n\n    // Handle new array format\n    if (Array.isArray(examples) && examples.length > 0) {\n      return html`\n        <h3>Examples</h3>\n        ${examples.map(\n          (example) => html`\n            ${example.title ? html`<h4>${example.title}</h4>` : nothing} ${this.renderMarkdown(example.value)}\n          `\n        )}\n      `\n    }\n\n    return nothing\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'help-panel': HelpPanel\n  }\n}\n"]}

package/build/src/help/help_panel.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=help_panel.styles.d.ts.map

package/build/src/help/help_panel.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"help_panel.styles.d.ts","sourceRoot":"","sources":["../../../src/help/help_panel.styles.ts"],"names":[],"mappings":";AAEA,wBAiMC"}

package/build/src/help/help_panel.styles.js

@@ -0,0 +1,196 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 380px;
+    max-width: calc(100vw - 40px);
+    max-height: calc(100vh - 40px);
+    background-color: var(--md-sys-color-surface-container-high);
+    color: var(--md-sys-color-on-surface);
+    border-radius: var(--md-sys-shape-corner-extra-large);
+    box-shadow: var(--md-sys-elevation-0);
+    overflow: hidden;
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    left: auto;
+    bottom: auto;
+
+    /* Animation for popover opening/closing */
+    transform: scaleY(0) translateY(-8px);
+    transform-origin: top;
+    opacity: 0;
+    transition:
+      transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      overlay 200ms allow-discrete,
+      display 200ms allow-discrete;
+
+    font-family: var(--md-sys-typescale-body-medium-font);
+    font-weight: var(--md-sys-typescale-body-medium-weight);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+
+    --code-background-color: var(--md-sys-color-surface-container-low);
+    --code-color: var(--md-sys-color-on-surface);
+    --api-font-code-family: 'Roboto Mono, Consolas, Menlo, monospace';
+  }
+
+  /* Popover open state */
+  :host(:popover-open) {
+    display: flex;
+    box-shadow: var(--md-sys-elevation-3);
+    transform: scaleY(1) translateY(0);
+    opacity: 1;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 12px 16px 24px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+    flex-shrink: 0;
+    cursor: grab;
+    user-select: none;
+    transition:
+      border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 0 0 0 transparent;
+  }
+
+  /* Add subtle shadow when content is scrolled */
+  :host([data-scrolled]) .header {
+    border-bottom-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.3));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .header:active {
+    cursor: grabbing;
+  }
+
+  .header:hover {
+    background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.05));
+  }
+
+  .title {
+    font-family: var(--md-sys-typescale-title-medium-font);
+    font-weight: var(--md-sys-typescale-title-medium-weight);
+    font-size: var(--md-sys-typescale-title-medium-size);
+    letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+    line-height: var(--md-sys-typescale-title-medium-height);
+  }
+
+  .content-wrapper {
+    overflow-y: auto;
+    flex-grow: 1;
+    position: relative;
+    cursor: grab;
+    /* CSS custom properties for scroll state */
+    --scroll-top: 0;
+    --scroll-bottom: 0;
+  }
+
+  /* Scroll shadows - show when content is scrolled */
+  .content-wrapper::before,
+  .content-wrapper::after {
+    content: '';
+    position: sticky;
+    left: 0;
+    right: 0;
+    height: 12px;
+    display: block;
+    pointer-events: none;
+    z-index: 1;
+    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Top scroll shadow */
+  .content-wrapper::before {
+    top: 0;
+    background: linear-gradient(to bottom, var(--md-sys-color-surface-container-highest) 0%, transparent 100%);
+    opacity: var(--scroll-top, 0);
+  }
+
+  /* Bottom scroll shadow */
+  .content-wrapper::after {
+    bottom: 0;
+    background: linear-gradient(to top, var(--md-sys-color-surface-container-highest) 0%, transparent 100%);
+    opacity: var(--scroll-bottom, 0);
+    margin-top: -12px; /* Overlap with content */
+  }
+
+  .content {
+    padding: 20px;
+    cursor: default;
+    user-select: text;
+  }
+
+  /* Only style our custom section headers (not markdown content) */
+  .content > h3:not([slot='markdown-html'] *) {
+    font-family: var(--md-sys-typescale-headline-small-font);
+    font-weight: var(--md-sys-typescale-headline-small-weight);
+    font-size: var(--md-sys-typescale-headline-small-size);
+    letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+    line-height: var(--md-sys-typescale-headline-small-height);
+    margin-top: 20px;
+    margin-bottom: 8px;
+    color: var(--md-sys-color-on-surface);
+  }
+
+  /* Style the Links section specifically */
+  .links {
+    margin-top: 20px;
+  }
+
+  .links ul {
+    list-style: none;
+    padding: 0;
+    margin: 8px 0 0 0;
+  }
+
+  .links li {
+    margin-bottom: 4px;
+  }
+
+  .links li a {
+    color: var(--md-sys-color-primary);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .links li a:hover {
+    text-decoration: underline;
+  }
+
+  /* Smooth content animation */
+  .header,
+  .content-wrapper {
+    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;
+  }
+
+  :host(:not([opened])) .header,
+  :host(:not([opened])) .content-wrapper {
+    opacity: 0;
+    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  [slot='markdown-html'] pre {
+    border-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  .content [slot='markdown-html'] code,
+  .content [slot='markdown-html'] pre {
+    word-break: break-word;
+  }
+`;
+//# sourceMappingURL=help_panel.styles.js.map

package/build/src/help/help_panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help_panel.styles.js","sourceRoot":"","sources":["../../../src/help/help_panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiMjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    width: 380px;\n    max-width: calc(100vw - 40px);\n    max-height: calc(100vh - 40px);\n    background-color: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-on-surface);\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    box-shadow: var(--md-sys-elevation-0);\n    overflow: hidden;\n    border: none;\n    margin: 0;\n    padding: 0;\n\n    position: fixed;\n    top: 20px;\n    right: 20px;\n    left: auto;\n    bottom: auto;\n\n    /* Animation for popover opening/closing */\n    transform: scaleY(0) translateY(-8px);\n    transform-origin: top;\n    opacity: 0;\n    transition:\n      transform 200ms cubic-bezier(0.4, 0, 0.2, 1),\n      box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),\n      overlay 200ms allow-discrete,\n      display 200ms allow-discrete;\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    --code-background-color: var(--md-sys-color-surface-container-low);\n    --code-color: var(--md-sys-color-on-surface);\n    --api-font-code-family: 'Roboto Mono, Consolas, Menlo, monospace';\n  }\n\n  /* Popover open state */\n  :host(:popover-open) {\n    display: flex;\n    box-shadow: var(--md-sys-elevation-3);\n    transform: scaleY(1) translateY(0);\n    opacity: 1;\n  }\n\n  .header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 12px 16px 24px;\n    border-bottom: 1px solid var(--md-sys-color-outline-variant, #cac4d0);\n    flex-shrink: 0;\n    cursor: grab;\n    user-select: none;\n    transition:\n      border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1),\n      box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 0 0 0 transparent;\n  }\n\n  /* Add subtle shadow when content is scrolled */\n  :host([data-scrolled]) .header {\n    border-bottom-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.3));\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  }\n\n  .header:active {\n    cursor: grabbing;\n  }\n\n  .header:hover {\n    background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.05));\n  }\n\n  .title {\n    font-family: var(--md-sys-typescale-title-medium-font);\n    font-weight: var(--md-sys-typescale-title-medium-weight);\n    font-size: var(--md-sys-typescale-title-medium-size);\n    letter-spacing: var(--md-sys-typescale-title-medium-tracking);\n    line-height: var(--md-sys-typescale-title-medium-height);\n  }\n\n  .content-wrapper {\n    overflow-y: auto;\n    flex-grow: 1;\n    position: relative;\n    cursor: grab;\n    /* CSS custom properties for scroll state */\n    --scroll-top: 0;\n    --scroll-bottom: 0;\n  }\n\n  /* Scroll shadows - show when content is scrolled */\n  .content-wrapper::before,\n  .content-wrapper::after {\n    content: '';\n    position: sticky;\n    left: 0;\n    right: 0;\n    height: 12px;\n    display: block;\n    pointer-events: none;\n    z-index: 1;\n    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  /* Top scroll shadow */\n  .content-wrapper::before {\n    top: 0;\n    background: linear-gradient(to bottom, var(--md-sys-color-surface-container-highest) 0%, transparent 100%);\n    opacity: var(--scroll-top, 0);\n  }\n\n  /* Bottom scroll shadow */\n  .content-wrapper::after {\n    bottom: 0;\n    background: linear-gradient(to top, var(--md-sys-color-surface-container-highest) 0%, transparent 100%);\n    opacity: var(--scroll-bottom, 0);\n    margin-top: -12px; /* Overlap with content */\n  }\n\n  .content {\n    padding: 20px;\n    cursor: default;\n    user-select: text;\n  }\n\n  /* Only style our custom section headers (not markdown content) */\n  .content > h3:not([slot='markdown-html'] *) {\n    font-family: var(--md-sys-typescale-headline-small-font);\n    font-weight: var(--md-sys-typescale-headline-small-weight);\n    font-size: var(--md-sys-typescale-headline-small-size);\n    letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n    line-height: var(--md-sys-typescale-headline-small-height);\n    margin-top: 20px;\n    margin-bottom: 8px;\n    color: var(--md-sys-color-on-surface);\n  }\n\n  /* Style the Links section specifically */\n  .links {\n    margin-top: 20px;\n  }\n\n  .links ul {\n    list-style: none;\n    padding: 0;\n    margin: 8px 0 0 0;\n  }\n\n  .links li {\n    margin-bottom: 4px;\n  }\n\n  .links li a {\n    color: var(--md-sys-color-primary);\n    text-decoration: none;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .links li a:hover {\n    text-decoration: underline;\n  }\n\n  /* Smooth content animation */\n  .header,\n  .content-wrapper {\n    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1) 50ms;\n  }\n\n  :host(:not([opened])) .header,\n  :host(:not([opened])) .content-wrapper {\n    opacity: 0;\n    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  [slot='markdown-html'] pre {\n    border-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  .content [slot='markdown-html'] code,\n  .content [slot='markdown-html'] pre {\n    word-break: break-word;\n  }\n`\n"]}