@ind-ds/core 0.1.0 → 0.2.0

package/dist/collection/components/organisms/production-cell/production-cell.js

@@ -0,0 +1,121 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Production cell container: groups the machines / equipment of a work cell
+ * under a single header with an aggregate state. Slot the machine overviews or
+ * equipment cards into the body.
+ */
+export class IndProductionCell {
+    heading;
+    /** Cell identifier. */
+    cellId;
+    /** Aggregate cell state. */
+    state = 'unknown';
+    /** Grid columns for the body. */
+    columns = 2;
+    render() {
+        const dot = this.state === 'unknown' ? 'neutral' : this.state;
+        return (h(Host, { key: '35e4fcdd6cb701885f2c78537be16a7ecd8e91ba' }, h("div", { key: '76d6be37943e5aa81675df3b2a8bfc49039b32ec', class: "panel-head" }, h("ind-status-dot", { key: '3407e7603e49002642fc75617e9519c6adf169d3', state: dot, size: "md" }), h("div", { key: 'a6d0d7a42ca56de8b66cb7ea7779894025b6fab4', class: "panel-titles" }, h("span", { key: '4b60ee48fefdae0ef2dbad4e3c2b147c27c7cd6f', class: "panel-title", part: "heading" }, this.heading), this.cellId && h("span", { key: 'a16755ee33fd0d8da31a3ff87dde88e6fdec174f', class: "panel-subtitle" }, this.cellId)), h("div", { key: '6d1c9d2ee8ed24496af1fb5d3832248b90612fb2', class: "panel-actions" }, h("slot", { key: '5b0ac0adccd56c0ae2eb9634cc58e7c98de63fb6', name: "actions" }))), h("div", { key: '2da43e932bbe6d6690d25d265da175b0d7a4f97b', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, h("slot", { key: '1bfbe1ceab5d508e28a6359e6bb105266c776768' }))));
+    }
+    static get is() { return "ind-production-cell"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "production-cell.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "production-cell.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "cellId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell identifier."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cell-id"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentCardState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"unknown\" | \"warning\"",
+                    "references": {
+                        "EquipmentCardState": {
+                            "location": "import",
+                            "path": "../../molecules/equipment-status-card/equipment-status-card",
+                            "id": "src/components/molecules/equipment-status-card/equipment-status-card.tsx::EquipmentCardState",
+                            "referenceLocation": "EquipmentCardState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aggregate cell state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'unknown'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid columns for the body."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            }
+        };
+    }
+}
+//# sourceMappingURL=production-cell.js.map

package/dist/collection/components/organisms/production-cell/production-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"production-cell.js","sourceRoot":"","sources":["../../../../src/components/organisms/production-cell/production-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;GAIG;AAMH,MAAM,OAAO,iBAAiB;IACpB,OAAO,CAAU;IACzB,uBAAuB;IACf,MAAM,CAAU;IACxB,4BAA4B;IACH,KAAK,GAAuB,SAAS,CAAC;IAC/D,iCAAiC;IACzB,OAAO,GAAW,CAAC,CAAC;IAE5B,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC9D,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,uEAAgB,KAAK,EAAE,GAAU,EAAE,IAAI,EAAC,IAAI,GAAG;gBAC/C,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;oBAC7D,IAAI,CAAC,MAAM,IAAI,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAQ,CAC7D;gBACN,4DAAK,KAAK,EAAC,eAAe;oBAAC,6DAAM,IAAI,EAAC,SAAS,GAAG,CAAM,CACpD;YACN,4DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,OAAO,mBAAmB,EAAE;gBAEzE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentCardState } from '../../molecules/equipment-status-card/equipment-status-card';\n\n/**\n * Production cell container: groups the machines / equipment of a work cell\n * under a single header with an aggregate state. Slot the machine overviews or\n * equipment cards into the body.\n */\n@Component({\n  tag: 'ind-production-cell',\n  styleUrls: ['../_shared/panel.css', 'production-cell.css'],\n  shadow: true,\n})\nexport class IndProductionCell {\n  @Prop() heading!: string;\n  /** Cell identifier. */\n  @Prop() cellId?: string;\n  /** Aggregate cell state. */\n  @Prop({ reflect: true }) state: EquipmentCardState = 'unknown';\n  /** Grid columns for the body. */\n  @Prop() columns: number = 2;\n\n  render() {\n    const dot = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <ind-status-dot state={dot as any} size=\"md\" />\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.cellId && <span class=\"panel-subtitle\">{this.cellId}</span>}\n          </div>\n          <div class=\"panel-actions\"><slot name=\"actions\" /></div>\n        </div>\n        <div\n          class=\"panel-grid\"\n          part=\"grid\"\n          style={{ gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/production-dashboard/production-dashboard.css

@@ -0,0 +1,3 @@
+:host {
+  min-width: 520px;
+}

package/dist/collection/components/organisms/production-dashboard/production-dashboard.js

@@ -0,0 +1,91 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Production overview dashboard. Slot KPI / tag / trend molecules into the
+ * grid; an optional `shift` subtitle and `actions` slot sit in the header.
+ */
+export class IndProductionDashboard {
+    heading = 'Production';
+    /** Context subtitle (e.g. "Line 2 · Shift A"). */
+    subtitle;
+    /** Number of grid columns. */
+    columns = 4;
+    render() {
+        return (h(Host, { key: 'bee0bf466d41d96ba449a47f5b24fbf0d82bdc62' }, h("div", { key: 'db5b706d5fa704aaaa3c555f534c03eb4eca35aa', class: "panel-head" }, h("div", { key: 'b5937e5a4db9bacb744e75fb53a853e26259cb4a', class: "panel-titles" }, h("span", { key: '7c52d8676b46635712dc906d5cb063913cd032ed', class: "panel-title", part: "heading" }, this.heading), this.subtitle && h("span", { key: '30f1b6fc4c3a5b5013c40dff32365d713fdc0017', class: "panel-subtitle" }, this.subtitle)), h("div", { key: '0aeae273ba718813861d84725e10959c9324ee9a', class: "panel-actions" }, h("slot", { key: 'bf3482af0847676d8749ecfd52f3941e2ad85ade', name: "actions" }))), h("div", { key: '935b9923c0b4d88bcb0835d099e8ed0687bbb7c3', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, h("slot", { key: '630520d4b536738422ca4c7e8f7fba0e834da108' }))));
+    }
+    static get is() { return "ind-production-dashboard"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "production-dashboard.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "production-dashboard.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Production'"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Context subtitle (e.g. \"Line 2 \u00B7 Shift A\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of grid columns."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "4"
+            }
+        };
+    }
+}
+//# sourceMappingURL=production-dashboard.js.map

package/dist/collection/components/organisms/production-dashboard/production-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"production-dashboard.js","sourceRoot":"","sources":["../../../../src/components/organisms/production-dashboard/production-dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,sBAAsB;IACzB,OAAO,GAAW,YAAY,CAAC;IACvC,kDAAkD;IAC1C,QAAQ,CAAU;IAC1B,8BAA8B;IACtB,OAAO,GAAW,CAAC,CAAC;IAE5B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;oBAC7D,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,QAAQ,CAAQ,CACjE;gBACN,4DAAK,KAAK,EAAC,eAAe;oBAAC,6DAAM,IAAI,EAAC,SAAS,GAAG,CAAM,CACpD;YACN,4DACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,OAAO,mBAAmB,EAAE;gBAEzE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Production overview dashboard. Slot KPI / tag / trend molecules into the\n * grid; an optional `shift` subtitle and `actions` slot sit in the header.\n */\n@Component({\n  tag: 'ind-production-dashboard',\n  styleUrls: ['../_shared/panel.css', 'production-dashboard.css'],\n  shadow: true,\n})\nexport class IndProductionDashboard {\n  @Prop() heading: string = 'Production';\n  /** Context subtitle (e.g. \"Line 2 · Shift A\"). */\n  @Prop() subtitle?: string;\n  /** Number of grid columns. */\n  @Prop() columns: number = 4;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.subtitle && <span class=\"panel-subtitle\">{this.subtitle}</span>}\n          </div>\n          <div class=\"panel-actions\"><slot name=\"actions\" /></div>\n        </div>\n        <div\n          class=\"panel-grid\"\n          part=\"grid\"\n          style={{ gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/production-line-overview/production-line-overview.css

@@ -0,0 +1,57 @@
+:host {
+  min-width: 520px;
+}
+
+.line {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  padding: var(--ind-spacing-5, 12px);
+  overflow-x: auto;
+}
+
+.station {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+  min-width: 96px;
+  padding: var(--ind-spacing-4, 8px);
+  background: var(--ind-surface-sunken);
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-sm, 2px);
+  border-top: 3px solid var(--ind-surface-border-strong);
+}
+
+.station-fault { border-top-color: var(--ind-state-fault-bg, #dc2626); }
+.station-warning { border-top-color: var(--ind-state-warning-bg, #f59e0b); }
+.station-running { border-top-color: var(--ind-state-running-bg, #16a34a); }
+.station-maintenance { border-top-color: var(--ind-state-maintenance-bg, #2563eb); }
+
+.station-head {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+}
+
+.station-tag {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-surface-text-muted);
+}
+
+.station-name {
+  font-size: var(--ind-font-size-base, 12px);
+  font-weight: var(--ind-font-weight-medium, 500);
+}
+
+.station-rate {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary);
+}
+
+.arrow {
+  color: var(--ind-surface-text-muted);
+  font-size: var(--ind-font-size-lg, 14px);
+  flex: 0 0 auto;
+}

package/dist/collection/components/organisms/production-line-overview/production-line-overview.js

@@ -0,0 +1,76 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Left-to-right production line overview: a sequence of station status tiles
+ * connected by flow arrows. Each tile shows state, tag and an optional rate.
+ */
+export class IndProductionLineOverview {
+    heading = 'Production line';
+    stations = [];
+    render() {
+        return (h(Host, { key: 'acef84fa40b80a710503ad9f3310c954500b7c46' }, h("div", { key: '6a473b0aad1ea689c562bcfa8e3ca744e35de922', class: "panel-head" }, h("span", { key: '8bcb4d572b94aae2cb3f37e5e08bc41596f6f6d3', class: "panel-title", part: "heading" }, this.heading)), h("div", { key: '88742d308c8ba3b58b9a1a5b9b4ee9afed5c1b03', class: "line", part: "line" }, this.stations.map((s, i) => [
+            h("div", { class: `station station-${s.state}`, part: "station", key: `s${i}` }, h("div", { class: "station-head" }, h("ind-status-dot", { state: (s.state === 'unknown' ? 'neutral' : s.state), size: "sm" }), s.tag && h("span", { class: "station-tag" }, s.tag)), h("span", { class: "station-name" }, s.name), s.rate !== undefined && (h("span", { class: "station-rate" }, s.rate, s.unit ? ` ${s.unit}` : ''))),
+            i < this.stations.length - 1 ? (h("span", { class: "arrow", part: "arrow", "aria-hidden": "true", key: `a${i}` }, "\u2192")) : null,
+        ]))));
+    }
+    static get is() { return "ind-production-line-overview"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "production-line-overview.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "production-line-overview.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Production line'"
+            },
+            "stations": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LineStation[]",
+                    "resolved": "LineStation[]",
+                    "references": {
+                        "LineStation": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/organisms/production-line-overview/production-line-overview.tsx",
+                            "id": "src/components/organisms/production-line-overview/production-line-overview.tsx::LineStation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}
+//# sourceMappingURL=production-line-overview.js.map

package/dist/collection/components/organisms/production-line-overview/production-line-overview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"production-line-overview.js","sourceRoot":"","sources":["../../../../src/components/organisms/production-line-overview/production-line-overview.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYzD;;;GAGG;AAMH,MAAM,OAAO,yBAAyB;IAC5B,OAAO,GAAW,iBAAiB,CAAC;IACpC,QAAQ,GAAkB,EAAE,CAAC;IAErC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC1D;YACN,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3B,WAAK,KAAK,EAAE,mBAAmB,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,IAAI,CAAC,EAAE;oBACnE,WAAK,KAAK,EAAC,cAAc;wBACvB,sBAAgB,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAQ,EAAE,IAAI,EAAC,IAAI,GAAG;wBACxF,CAAC,CAAC,GAAG,IAAI,YAAM,KAAK,EAAC,aAAa,IAAE,CAAC,CAAC,GAAG,CAAQ,CAC9C;oBACN,YAAM,KAAK,EAAC,cAAc,IAAE,CAAC,CAAC,IAAI,CAAQ;oBACzC,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CACvB,YAAM,KAAK,EAAC,cAAc;wBAAE,CAAC,CAAC,IAAI;wBAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAQ,CACvE,CACG;gBACN,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,EAAC,GAAG,EAAE,IAAI,CAAC,EAAE,aAAU,CAC3E,CAAC,CAAC,CAAC,IAAI;aACT,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentCardState } from '../../molecules/equipment-status-card/equipment-status-card';\n\nexport interface LineStation {\n  name: string;\n  tag?: string;\n  state: EquipmentCardState;\n  /** Optional throughput / rate readout. */\n  rate?: number;\n  unit?: string;\n}\n\n/**\n * Left-to-right production line overview: a sequence of station status tiles\n * connected by flow arrows. Each tile shows state, tag and an optional rate.\n */\n@Component({\n  tag: 'ind-production-line-overview',\n  styleUrls: ['../_shared/panel.css', 'production-line-overview.css'],\n  shadow: true,\n})\nexport class IndProductionLineOverview {\n  @Prop() heading: string = 'Production line';\n  @Prop() stations: LineStation[] = [];\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n        </div>\n        <div class=\"line\" part=\"line\">\n          {this.stations.map((s, i) => [\n            <div class={`station station-${s.state}`} part=\"station\" key={`s${i}`}>\n              <div class=\"station-head\">\n                <ind-status-dot state={(s.state === 'unknown' ? 'neutral' : s.state) as any} size=\"sm\" />\n                {s.tag && <span class=\"station-tag\">{s.tag}</span>}\n              </div>\n              <span class=\"station-name\">{s.name}</span>\n              {s.rate !== undefined && (\n                <span class=\"station-rate\">{s.rate}{s.unit ? ` ${s.unit}` : ''}</span>\n              )}\n            </div>,\n            i < this.stations.length - 1 ? (\n              <span class=\"arrow\" part=\"arrow\" aria-hidden=\"true\" key={`a${i}`}>→</span>\n            ) : null,\n          ])}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/pump-control-panel/pump-control-panel.css

@@ -0,0 +1,3 @@
+:host {
+  min-width: 280px;
+}

package/dist/collection/components/organisms/pump-control-panel/pump-control-panel.js

@@ -0,0 +1,217 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Pump control panel: `<ind-pump-card>` faceplate plus start/stop and mode.
+ */
+export class IndPumpControlPanel {
+    heading = 'Pump';
+    tag;
+    state = 'stopped';
+    flow;
+    pressure;
+    mode;
+    indStart;
+    indStop;
+    indMode;
+    runState() {
+        if (this.state === 'running')
+            return 'running';
+        if (this.state === 'fault')
+            return 'fault';
+        return 'stopped';
+    }
+    onMode = (e) => {
+        e.stopPropagation();
+        this.indMode.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: 'd8912bba9bd856bd8d7441725e604a198af9cfad' }, h("div", { key: 'c2753a9668b3664af68836a35094280701dcbcf5', class: "panel-head" }, h("div", { key: 'd496718af739b6146b1a2488eb2546267d4c0e31', class: "panel-titles" }, h("span", { key: 'ac679e3704a44465ab547f5dda0a6ad6d7230f61', class: "panel-title", part: "heading" }, this.heading), this.tag && h("span", { key: '38aca6f60bf902877172a590d174896120efb07d', class: "panel-subtitle" }, this.tag))), h("div", { key: '7a388aa6bc9aef0e4a1ac7172d64ea673bf0b72a', class: "panel-body" }, h("ind-pump-card", { key: '068a75833a8476b9146d90127027b7b05d49d287', tag: this.tag, label: this.heading, state: this.state, flow: this.flow, pressure: this.pressure }), h("ind-start-stop-control", { key: '6711c260e7f9cb982a15f1efcc2e904f4a04bae5', label: this.heading, state: this.runState(), onIndStart: () => this.indStart.emit(), onIndStop: () => this.indStop.emit() }), h("ind-mode-selector", { key: '3b35daf8000b0cee1e3ba7e3724859bd07e79751', value: this.mode, onIndChange: this.onMode }))));
+    }
+    static get is() { return "ind-pump-control-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "../_shared/control-panel.css", "pump-control-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "../_shared/control-panel.css", "pump-control-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Pump'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "EquipmentState": {
+                            "location": "import",
+                            "path": "../../atoms/_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentState",
+                            "referenceLocation": "EquipmentState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "flow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "flow"
+            },
+            "pressure": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pressure"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indStart",
+                "name": "indStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indStop",
+                "name": "indStop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indMode",
+                "name": "indMode",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pump-control-panel.js.map

package/dist/collection/components/organisms/pump-control-panel/pump-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pump-control-panel.js","sourceRoot":"","sources":["../../../../src/components/organisms/pump-control-panel/pump-control-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E;;GAEG;AAMH,MAAM,OAAO,mBAAmB;IACtB,OAAO,GAAW,MAAM,CAAC;IACzB,GAAG,CAAU;IACI,KAAK,GAAmB,SAAS,CAAC;IACnD,IAAI,CAAU;IACd,QAAQ,CAAU;IAClB,IAAI,CAAU;IAEb,QAAQ,CAAsB;IAC9B,OAAO,CAAsB;IAC7B,OAAO,CAAwB;IAEhC,QAAQ;QACd,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;QAC/C,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO;YAAE,OAAO,OAAO,CAAC;QAC3C,OAAO,SAAS,CAAC;IACnB,CAAC;IAEO,MAAM,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC1C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;oBAC7D,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,GAAG,CAAQ,CACvD,CACF;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,sEACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;gBACF,+EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EACtC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GACpC;gBACF,0EAAmB,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,GAAI,CAC7D,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { EquipmentState } from '../../atoms/_equipment/types';\nimport type { RunState } from '../../molecules/start-stop-control/start-stop-control';\n\n/**\n * Pump control panel: `<ind-pump-card>` faceplate plus start/stop and mode.\n */\n@Component({\n  tag: 'ind-pump-control-panel',\n  styleUrls: ['../_shared/panel.css', '../_shared/control-panel.css', 'pump-control-panel.css'],\n  shadow: true,\n})\nexport class IndPumpControlPanel {\n  @Prop() heading: string = 'Pump';\n  @Prop() tag?: string;\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  @Prop() flow?: number;\n  @Prop() pressure?: number;\n  @Prop() mode?: string;\n\n  @Event() indStart!: EventEmitter<void>;\n  @Event() indStop!: EventEmitter<void>;\n  @Event() indMode!: EventEmitter<string>;\n\n  private runState(): RunState {\n    if (this.state === 'running') return 'running';\n    if (this.state === 'fault') return 'fault';\n    return 'stopped';\n  }\n\n  private onMode = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.indMode.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.tag && <span class=\"panel-subtitle\">{this.tag}</span>}\n          </div>\n        </div>\n        <div class=\"panel-body\">\n          <ind-pump-card\n            tag={this.tag}\n            label={this.heading}\n            state={this.state}\n            flow={this.flow}\n            pressure={this.pressure}\n          />\n          <ind-start-stop-control\n            label={this.heading}\n            state={this.runState()}\n            onIndStart={() => this.indStart.emit()}\n            onIndStop={() => this.indStop.emit()}\n          />\n          <ind-mode-selector value={this.mode} onIndChange={this.onMode} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/recipe-management-panel/recipe-management-panel.css

@@ -0,0 +1,10 @@
+:host {
+  min-width: 340px;
+}
+
+.params {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ind-surface-border-subtle);
+  border-radius: var(--ind-radius-sm, 2px);
+}