@ind-ds/core 0.1.0

package/dist/collection/components/organisms/app-header/app-header.js

@@ -0,0 +1,256 @@
+import { h, Host } from "@stencil/core";
+export class IndAppHeader {
+    /** Brand name (uppercase by convention). */
+    brand;
+    /** Sub-brand line (e.g. "Maintenance Console"). */
+    subBrand;
+    /** Machine identifier shown next to the brand. */
+    machineId;
+    /** Broker / realtime connection state — drives the dot. */
+    mqttState = 'neutral';
+    /** Label rendered next to the dot (e.g. "Connected"). */
+    mqttLabel;
+    /** App version (e.g. "v1.4.2"). */
+    version;
+    /** Documentation URL. */
+    docsUrl;
+    /** Hide the built-in "Change machine" button. */
+    hideChangeMachine = false;
+    /** Hide the built-in "Disconnect" button. */
+    hideDisconnect = false;
+    indChangeMachine;
+    indDisconnect;
+    render() {
+        return (h(Host, { key: 'c65d79c697786cf1e17f3d13a1f5475da46e66ac', role: "banner" }, h("div", { key: '4c17ab40581251748f4bfbdceb8553d736b9288b', class: "brand", part: "brand" }, h("slot", { key: '2e4a11be914770ce6cf3b2e2a4cf7e92fbd95702', name: "logo" }, h("span", { key: 'ff2a98d37c5153a9169b188a2e77d24f49a505e5', class: "brand-logo", "aria-hidden": "true" }, "\u2B22")), h("div", { key: 'a679a938ab050aa8e2c326a88e905563134fbbc5', class: "brand-text" }, h("span", { key: '19b941fba9c4d7dbbda39242f3c6afb543c5ef6a', class: "brand-name" }, this.brand), this.subBrand && h("span", { key: 'd77217db67b0384df179638cbf98ae38697a7071', class: "brand-sub" }, this.subBrand))), this.machineId && (h("div", { key: '1e40da6c490185efe7423b1b82d5a5e56cd4cb9a', class: "machine", part: "machine" }, h("span", { key: '5ca76acc4d270e8f6adc12d0077f1371e136aded', class: "machine-label" }, "Machine"), h("span", { key: 'a10840b72441bb7adabd0f152332bfa9e081eff5', class: "machine-id" }, this.machineId))), h("div", { key: '5cfbdeb0e191cdbfa679fd0a1e205c4544065b10', class: "mqtt", part: "mqtt" }, h("ind-status-dot", { key: 'b80758c2a80a27b362651cd1251c92d3b510212e', state: this.mqttState, size: "md" }), this.mqttLabel && h("span", { key: 'a443524b51f9950e068bc815bc4e89f52bc9c296', class: "mqtt-label" }, this.mqttLabel)), h("span", { key: '84028540ba07e5f4b400e9694a2c102c0ffcb618', class: "spacer" }), h("div", { key: '42e07d1726547c318367423708e9fd7078a771ed', class: "meta", part: "meta" }, this.version && h("span", { key: '9fc02e0f44f50126554fa70e127bf5e1819b09ee', class: "version" }, this.version), this.docsUrl && (h("a", { key: '3839f6149b334591551124f4bb5eb296d0f4a296', class: "docs", href: this.docsUrl, target: "_blank", rel: "noopener noreferrer" }, "Documentation"))), h("div", { key: '4265851f62d3f66518a9e07b32933974a301376b', class: "actions", part: "actions" }, h("slot", { key: 'dffb5909cf929b3c04e47d598e746a6caf8d55f5', name: "actions" }, !this.hideChangeMachine && (h("button", { key: '824c0c0b5419753e50d8ba002dee057ba2ec2b46', type: "button", class: "action", onClick: () => this.indChangeMachine.emit() }, "Change machine")), !this.hideDisconnect && (h("button", { key: '5269a1bed2754ca7f7bfd83f0f431cae2d4c1bf5', type: "button", class: "action action--danger", onClick: () => this.indDisconnect.emit() }, "Disconnect"))))));
+    }
+    static get is() { return "ind-app-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["app-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["app-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "brand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Brand name (uppercase by convention)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "brand"
+            },
+            "subBrand": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sub-brand line (e.g. \"Maintenance Console\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sub-brand"
+            },
+            "machineId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Machine identifier shown next to the brand."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "machine-id"
+            },
+            "mqttState": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AppHeaderConnectionState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"neutral\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "AppHeaderConnectionState": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/organisms/app-header/app-header.tsx",
+                            "id": "src/components/organisms/app-header/app-header.tsx::AppHeaderConnectionState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Broker / realtime connection state \u2014 drives the dot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mqtt-state",
+                "defaultValue": "'neutral'"
+            },
+            "mqttLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label rendered next to the dot (e.g. \"Connected\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mqtt-label"
+            },
+            "version": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "App version (e.g. \"v1.4.2\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "version"
+            },
+            "docsUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Documentation URL."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "docs-url"
+            },
+            "hideChangeMachine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the built-in \"Change machine\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-change-machine",
+                "defaultValue": "false"
+            },
+            "hideDisconnect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the built-in \"Disconnect\" button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-disconnect",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChangeMachine",
+                "name": "indChangeMachine",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indDisconnect",
+                "name": "indDisconnect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=app-header.js.map

package/dist/collection/components/organisms/app-header/app-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-header.js","sourceRoot":"","sources":["../../../../src/components/organisms/app-header/app-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type AppHeaderConnectionState =\n  | 'running' | 'fault' | 'warning' | 'maintenance' | 'stopped' | 'neutral';\n\n@Component({\n  tag: 'ind-app-header',\n  styleUrl: 'app-header.css',\n  shadow: true,\n})\nexport class IndAppHeader {\n  /** Brand name (uppercase by convention). */\n  @Prop() brand!: string;\n  /** Sub-brand line (e.g. \"Maintenance Console\"). */\n  @Prop() subBrand?: string;\n  /** Machine identifier shown next to the brand. */\n  @Prop() machineId?: string;\n  /** Broker / realtime connection state — drives the dot. */\n  @Prop() mqttState: AppHeaderConnectionState = 'neutral';\n  /** Label rendered next to the dot (e.g. \"Connected\"). */\n  @Prop() mqttLabel?: string;\n  /** App version (e.g. \"v1.4.2\"). */\n  @Prop() version?: string;\n  /** Documentation URL. */\n  @Prop() docsUrl?: string;\n  /** Hide the built-in \"Change machine\" button. */\n  @Prop() hideChangeMachine: boolean = false;\n  /** Hide the built-in \"Disconnect\" button. */\n  @Prop() hideDisconnect: boolean = false;\n\n  @Event() indChangeMachine!: EventEmitter<void>;\n  @Event() indDisconnect!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host role=\"banner\">\n        <div class=\"brand\" part=\"brand\">\n          <slot name=\"logo\">\n            <span class=\"brand-logo\" aria-hidden=\"true\">⬢</span>\n          </slot>\n          <div class=\"brand-text\">\n            <span class=\"brand-name\">{this.brand}</span>\n            {this.subBrand && <span class=\"brand-sub\">{this.subBrand}</span>}\n          </div>\n        </div>\n\n        {this.machineId && (\n          <div class=\"machine\" part=\"machine\">\n            <span class=\"machine-label\">Machine</span>\n            <span class=\"machine-id\">{this.machineId}</span>\n          </div>\n        )}\n\n        <div class=\"mqtt\" part=\"mqtt\">\n          <ind-status-dot state={this.mqttState} size=\"md\" />\n          {this.mqttLabel && <span class=\"mqtt-label\">{this.mqttLabel}</span>}\n        </div>\n\n        <span class=\"spacer\" />\n\n        <div class=\"meta\" part=\"meta\">\n          {this.version && <span class=\"version\">{this.version}</span>}\n          {this.docsUrl && (\n            <a class=\"docs\" href={this.docsUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n              Documentation\n            </a>\n          )}\n        </div>\n\n        <div class=\"actions\" part=\"actions\">\n          <slot name=\"actions\">\n            {!this.hideChangeMachine && (\n              <button\n                type=\"button\"\n                class=\"action\"\n                onClick={() => this.indChangeMachine.emit()}\n              >Change machine</button>\n            )}\n            {!this.hideDisconnect && (\n              <button\n                type=\"button\"\n                class=\"action action--danger\"\n                onClick={() => this.indDisconnect.emit()}\n              >Disconnect</button>\n            )}\n          </slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/mqtt-monitor/mqtt-monitor.css

@@ -0,0 +1,96 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--ind-font-family-sans);
+  background: var(--ind-surface-panel);
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-md, 3px);
+  overflow: hidden;
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);
+  border-bottom: 1px solid var(--ind-surface-border-default);
+  flex-wrap: wrap;
+}
+
+.filter {
+  flex: 1;
+  min-width: 200px;
+  height: var(--ind-size-input-sm, 24px);
+  padding: 0 var(--ind-spacing-4, 8px);
+  background: var(--ind-surface-sunken);
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-md, 3px);
+  font: inherit;
+  font-size: var(--ind-font-size-sm, 11px);
+  color: inherit;
+  outline: none;
+  box-sizing: border-box;
+}
+.filter::placeholder {
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+.filter:focus {
+  border-color: var(--ind-surface-focus-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring) 35%, transparent);
+}
+
+.check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+  font-size: var(--ind-font-size-sm, 11px);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.spacer { flex: 1; }
+
+.counter {
+  font-family: var(--ind-font-family-mono);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  font-size: var(--ind-font-size-sm, 11px);
+  white-space: nowrap;
+}
+
+.clear {
+  height: var(--ind-size-button-sm, 26px);
+  padding: 0 var(--ind-spacing-5, 12px);
+  background: var(--ind-button-default-bg);
+  color: var(--ind-button-default-fg);
+  border: 1px solid var(--ind-button-default-border);
+  border-radius: var(--ind-radius-md, 3px);
+  font: inherit;
+  font-size: var(--ind-font-size-sm, 11px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  cursor: pointer;
+}
+.clear:hover { background: var(--ind-button-default-bg-hover); }
+.clear:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring);
+  outline-offset: 2px;
+}
+
+.log {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);
+  background: var(--ind-color-palette-neutral-0, #000);
+  color: var(--ind-color-palette-neutral-800, #d0d7e0);
+  border: none;
+  outline: none;
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  line-height: var(--ind-font-line-height-normal, 1.4);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  resize: vertical;
+  cursor: default;
+}

package/dist/collection/components/organisms/mqtt-monitor/mqtt-monitor.js

@@ -0,0 +1,205 @@
+import { h, Host, } from "@stencil/core";
+export class IndMqttMonitor {
+    host;
+    /** Full log content. Newline-separated lines. */
+    log = '';
+    /** Active filter — substring match on each line, case-insensitive. */
+    filterValue = '';
+    /** When true, the log doesn't auto-scroll on new content. */
+    paused = false;
+    /** Visible rows of the log textarea. */
+    rows = 18;
+    indFilterChange;
+    indPauseChange;
+    indClear;
+    componentDidLoad() {
+        this.scrollToBottom();
+    }
+    onLogChange() {
+        if (!this.paused)
+            this.scrollToBottom();
+    }
+    scrollToBottom() {
+        requestAnimationFrame(() => {
+            const ta = this.host.shadowRoot?.querySelector('.log');
+            if (ta)
+                ta.scrollTop = ta.scrollHeight;
+        });
+    }
+    filteredLines() {
+        const lines = this.log.split('\n');
+        if (!this.filterValue)
+            return lines;
+        const f = this.filterValue.toLowerCase();
+        return lines.filter((l) => l.toLowerCase().includes(f));
+    }
+    onFilter = (e) => {
+        const v = e.target.value;
+        this.filterValue = v;
+        this.indFilterChange.emit(v);
+    };
+    onPause = (e) => {
+        const v = e.target.checked;
+        this.paused = v;
+        this.indPauseChange.emit(v);
+    };
+    render() {
+        const filtered = this.filteredLines();
+        const total = this.log ? this.log.split('\n').filter((l) => l.length > 0).length : 0;
+        const visible = filtered.filter((l) => l.length > 0).length;
+        const countLabel = this.filterValue ? `${visible} / ${total} msg` : `${total} msg`;
+        return (h(Host, { key: '611c593c0c13009b372c0f3d8077c363c9801b97' }, h("div", { key: '6552180414c9c06bf728b6d94eaa4ec282f9ecc9', class: "toolbar", part: "toolbar" }, h("input", { key: '715c06c1dcd91764b619093804bd52dd9ebb512c', class: "filter", part: "filter", type: "search", placeholder: "Filter topic / payload...", value: this.filterValue, onInput: this.onFilter }), h("label", { key: 'c7fc734cd7d0e08d28191804852ef7bf11ed01c7', class: "check" }, h("input", { key: '6b250678c32e5e83b2925275cdd44579cf682933', type: "checkbox", checked: this.paused, onChange: this.onPause }), h("span", { key: '77f2a59bd50c2a8c48c27a719730ba2efc5e5b9e' }, "Pause")), h("span", { key: 'eb60e89a998c60548f62d982691ffbdc1ce08eb7', class: "spacer" }), h("span", { key: '298521f0328cb32523d63dd3a45248575313b6f6', class: "counter", part: "counter" }, countLabel), h("button", { key: '32a5aa35b0e622e8fac010a79bbd30cb434ba09e', type: "button", class: "clear", part: "clear", onClick: () => this.indClear.emit() }, "Clear")), h("textarea", { key: '7ca66e1a42cdd672faae4d14004af23c2cae7bae', class: "log", part: "log", readonly: true, rows: this.rows }, filtered.join('\n'))));
+    }
+    static get is() { return "ind-mqtt-monitor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mqtt-monitor.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mqtt-monitor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "log": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Full log content. Newline-separated lines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "log",
+                "defaultValue": "''"
+            },
+            "filterValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active filter \u2014 substring match on each line, case-insensitive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-value",
+                "defaultValue": "''"
+            },
+            "paused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the log doesn't auto-scroll on new content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "paused",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible rows of the log textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "18"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indFilterChange",
+                "name": "indFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "indPauseChange",
+                "name": "indPauseChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "indClear",
+                "name": "indClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "log",
+                "methodName": "onLogChange"
+            }];
+    }
+}
+//# sourceMappingURL=mqtt-monitor.js.map

package/dist/collection/components/organisms/mqtt-monitor/mqtt-monitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqtt-monitor.js","sourceRoot":"","sources":["../../../../src/components/organisms/mqtt-monitor/mqtt-monitor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ind-mqtt-monitor',\n  styleUrl: 'mqtt-monitor.css',\n  shadow: true,\n})\nexport class IndMqttMonitor {\n  @Element() host!: HTMLElement;\n\n  /** Full log content. Newline-separated lines. */\n  @Prop() log: string = '';\n  /** Active filter — substring match on each line, case-insensitive. */\n  @Prop({ mutable: true }) filterValue: string = '';\n  /** When true, the log doesn't auto-scroll on new content. */\n  @Prop({ mutable: true }) paused: boolean = false;\n  /** Visible rows of the log textarea. */\n  @Prop() rows: number = 18;\n\n  @Event() indFilterChange!: EventEmitter<string>;\n  @Event() indPauseChange!: EventEmitter<boolean>;\n  @Event() indClear!: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.scrollToBottom();\n  }\n\n  @Watch('log')\n  onLogChange() {\n    if (!this.paused) this.scrollToBottom();\n  }\n\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      const ta = this.host.shadowRoot?.querySelector<HTMLTextAreaElement>('.log');\n      if (ta) ta.scrollTop = ta.scrollHeight;\n    });\n  }\n\n  private filteredLines(): string[] {\n    const lines = this.log.split('\\n');\n    if (!this.filterValue) return lines;\n    const f = this.filterValue.toLowerCase();\n    return lines.filter((l) => l.toLowerCase().includes(f));\n  }\n\n  private onFilter = (e: Event) => {\n    const v = (e.target as HTMLInputElement).value;\n    this.filterValue = v;\n    this.indFilterChange.emit(v);\n  };\n\n  private onPause = (e: Event) => {\n    const v = (e.target as HTMLInputElement).checked;\n    this.paused = v;\n    this.indPauseChange.emit(v);\n  };\n\n  render() {\n    const filtered = this.filteredLines();\n    const total = this.log ? this.log.split('\\n').filter((l) => l.length > 0).length : 0;\n    const visible = filtered.filter((l) => l.length > 0).length;\n    const countLabel = this.filterValue ? `${visible} / ${total} msg` : `${total} msg`;\n    return (\n      <Host>\n        <div class=\"toolbar\" part=\"toolbar\">\n          <input\n            class=\"filter\"\n            part=\"filter\"\n            type=\"search\"\n            placeholder=\"Filter topic / payload...\"\n            value={this.filterValue}\n            onInput={this.onFilter}\n          />\n          <label class=\"check\">\n            <input type=\"checkbox\" checked={this.paused} onChange={this.onPause} />\n            <span>Pause</span>\n          </label>\n          <span class=\"spacer\" />\n          <span class=\"counter\" part=\"counter\">{countLabel}</span>\n          <button\n            type=\"button\"\n            class=\"clear\"\n            part=\"clear\"\n            onClick={() => this.indClear.emit()}\n          >Clear</button>\n        </div>\n        <textarea\n          class=\"log\"\n          part=\"log\"\n          readonly\n          rows={this.rows}\n        >{filtered.join('\\n')}</textarea>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/sidebar-nav/sidebar-nav.css

@@ -0,0 +1,39 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: var(--ind-size-sidebar-width, 178px);
+  height: 100%;
+  background: var(--ind-surface-panel);
+  border-right: 1px solid var(--ind-surface-border-default);
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.brand {
+  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);
+}
+
+.brand:has(> :nth-child(1):empty),
+.brand:not(:has(*)) { display: none; }
+
+.items {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--ind-spacing-2, 4px) 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ind-surface-border-strong) transparent;
+}
+.items::-webkit-scrollbar { width: 8px; }
+.items::-webkit-scrollbar-thumb { background: var(--ind-surface-border-strong); border-radius: 4px; }
+.items::-webkit-scrollbar-track { background: transparent; }
+
+.footer {
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);
+  border-top: 1px solid var(--ind-surface-border-subtle);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+.footer:not(:has(*)) { display: none; }

package/dist/collection/components/organisms/sidebar-nav/sidebar-nav.js

@@ -0,0 +1,26 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Sidebar shell: a brand area on top, a scrollable nav list, and a footer area.
+ *
+ * State management is left to the consumer — drive `active` on each <ind-nav-item>
+ * from your router. The component is intentionally thin so it works with any
+ * routing approach (React Router, Vue Router, hash-based, none).
+ */
+export class IndSidebarNav {
+    render() {
+        return (h(Host, { key: '3ffd6c6d8afe2ed104b24ad1435d7a1d163c5071', role: "navigation" }, h("div", { key: '2a56d85274fca7043d8e5624a93cb99c8767fc74', class: "brand", part: "brand" }, h("slot", { key: 'd185e1c6570b33648700dd922e671f023b3d34fc', name: "brand" })), h("div", { key: '31aaa48b8e08549a3a4990cbe4ae74507b0a8ccb', class: "items", part: "items" }, h("slot", { key: '4ddb250ed915874ea6114588ab336e662526383f' })), h("div", { key: 'd666ea3f666be22246d6f2e2464a85b741b4bfed', class: "footer", part: "footer" }, h("slot", { key: 'fff6600b601ec97d47f2a79b983d0a7ef261db33', name: "footer" }))));
+    }
+    static get is() { return "ind-sidebar-nav"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sidebar-nav.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sidebar-nav.css"]
+        };
+    }
+}
+//# sourceMappingURL=sidebar-nav.js.map

package/dist/collection/components/organisms/sidebar-nav/sidebar-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav.js","sourceRoot":"","sources":["../../../../src/components/organisms/sidebar-nav/sidebar-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;GAMG;AAMH,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,YAAY;YACrB,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,6DAAM,IAAI,EAAC,OAAO,GAAG,CACjB;YACN,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,8DAAQ,CACJ;YACN,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAC/B,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * Sidebar shell: a brand area on top, a scrollable nav list, and a footer area.\n *\n * State management is left to the consumer — drive `active` on each <ind-nav-item>\n * from your router. The component is intentionally thin so it works with any\n * routing approach (React Router, Vue Router, hash-based, none).\n */\n@Component({\n  tag: 'ind-sidebar-nav',\n  styleUrl: 'sidebar-nav.css',\n  shadow: true,\n})\nexport class IndSidebarNav {\n  render() {\n    return (\n      <Host role=\"navigation\">\n        <div class=\"brand\" part=\"brand\">\n          <slot name=\"brand\" />\n        </div>\n        <div class=\"items\" part=\"items\">\n          <slot />\n        </div>\n        <div class=\"footer\" part=\"footer\">\n          <slot name=\"footer\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}