@ind-ds/core 0.1.1 → 0.2.1

package/dist/cjs/ind-process-control-panel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-process-control-panel.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,sBAAsB,GAAG,MAAM,CAAC,8KAA8K,CAAC;;MCaxM,sBAAsB,GAAA,MAAA;;;;;;;;AACzB,IAAA,OAAO;;AAEP,IAAA,GAAG;;IAEc,KAAK,GAAa,SAAS;;AAE5C,IAAA,IAAI;;IAEa,QAAQ,GAAW,CAAC;;AAErC,IAAA,EAAE;IACF,GAAG,GAAW,CAAC;IACf,GAAG,GAAW,GAAG;IACjB,IAAI,GAAW,GAAG;IAClB,SAAS,GAAW,CAAC;AACrB,IAAA,IAAI;AAEH,IAAA,QAAQ;AACR,IAAA,OAAO;;AAEP,IAAA,WAAW;;AAEX,IAAA,OAAO;AAER,IAAA,UAAU,GAAG,CAAC,CAAsB,KAAI;QAC9C,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACjC,KAAC;AACO,IAAA,MAAM,GAAG,CAAC,CAAsB,KAAI;QAC1C,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CACvD,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EACtC,SAAS,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CACpC,EACFA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,UAAU,EAAA,CAC5B,EACFA,OAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAA,CAAI,EACjEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-process-control-panel&encapsulation=shadow","src/components/organisms/process-control-panel/process-control-panel.css?tag=ind-process-control-panel&encapsulation=shadow","src/components/organisms/process-control-panel/process-control-panel.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 280px;\n}\n\n/* The faceplate children already have their own card chrome, so flatten them. */\n.panel-body ind-start-stop-control,\n.panel-body ind-setpoint-control,\n.panel-body ind-mode-selector {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { RunState } from '../../molecules/start-stop-control/start-stop-control';\n\n/**\n * Generic single-loop control panel: run command, setpoint vs PV and an\n * operating-mode selector. Re-emits the child commands so a parent can drive\n * the controller.\n */\n@Component({\n  tag: 'ind-process-control-panel',\n  styleUrls: ['../_shared/panel.css', 'process-control-panel.css'],\n  shadow: true,\n})\nexport class IndProcessControlPanel {\n  @Prop() heading!: string;\n  /** Loop tag (e.g. \"PIC-101\"). */\n  @Prop() tag?: string;\n  /** Run state. */\n  @Prop({ reflect: true }) state: RunState = 'stopped';\n  /** Operating mode value. */\n  @Prop() mode?: string;\n  /** Setpoint (two-way). */\n  @Prop({ mutable: true }) setpoint: number = 0;\n  /** Process value. */\n  @Prop() pv?: number;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 0.1;\n  @Prop() precision: number = 1;\n  @Prop() unit?: string;\n\n  @Event() indStart!: EventEmitter<void>;\n  @Event() indStop!: EventEmitter<void>;\n  /** Fires with the committed setpoint. */\n  @Event() indSetpoint!: EventEmitter<number>;\n  /** Fires with the selected mode. */\n  @Event() indMode!: EventEmitter<string>;\n\n  private onSetpoint = (e: CustomEvent<number>) => {\n    e.stopPropagation();\n    this.setpoint = e.detail;\n    this.indSetpoint.emit(e.detail);\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-start-stop-control\n            label={this.heading}\n            state={this.state}\n            onIndStart={() => this.indStart.emit()}\n            onIndStop={() => this.indStop.emit()}\n          />\n          <ind-setpoint-control\n            label=\"Setpoint\"\n            tag={this.tag}\n            value={this.setpoint}\n            pv={this.pv}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            precision={this.precision}\n            unit={this.unit}\n            onIndChange={this.onSetpoint}\n          />\n          <ind-mode-selector value={this.mode} onIndChange={this.onMode} />\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-process-symbol.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const processSymbolCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:44px;--_stroke:var(--ind-surface-border-strong, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="lg"]){--_w:60px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa)}.symbol{width:var(--_w);height:var(--_w);display:block}.outline{fill:var(--ind-surface-sunken, light-dark(#fff, #000));stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.tag{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-size:10px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}`;
+
+const IndProcessSymbol = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** ISA-5.1 instrument balloon shape. */
+    shape = 'circle';
+    /** Status coloring. */
+    state = 'normal';
+    /** Tag text rendered inside (e.g. "PT 101"). */
+    tag;
+    /** Caption rendered below the symbol. */
+    label;
+    /** Size. */
+    size = 'md';
+    shapeEl() {
+        switch (this.shape) {
+            case 'square':
+                return index.h("rect", { class: "outline", part: "outline", x: "4", y: "4", width: "40", height: "40", rx: "2" });
+            case 'diamond':
+                return index.h("polygon", { class: "outline", part: "outline", points: "24,3 45,24 24,45 3,24" });
+            case 'hexagon':
+                return index.h("polygon", { class: "outline", part: "outline", points: "14,6 34,6 45,24 34,42 14,42 3,24" });
+            case 'circle':
+            default:
+                return index.h("circle", { class: "outline", part: "outline", cx: "24", cy: "24", r: "20" });
+        }
+    }
+    render() {
+        const name = this.label ?? this.tag ?? 'instrument';
+        return (index.h(index.Host, { key: '24aef7364a542acddb8cb29fbf404faf7aa8972e', role: "img", "aria-label": `${name}${this.state !== 'normal' ? ' — ' + this.state : ''}` }, index.h("svg", { key: 'c5c4936c45d0d0ace90a5b86a593ae3f97c9f599', class: "symbol", part: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, this.shapeEl(), this.tag && (index.h("text", { key: '987ede87e53bd367f7af62f7903eef1c8661330a', class: "tag", x: "24", y: "24", "text-anchor": "middle", "dominant-baseline": "central" }, this.tag))), this.label && index.h("span", { key: '0ba6f143afefa065bf938fcc79cbf2faef393e51', class: "label", part: "label" }, this.label)));
+    }
+};
+IndProcessSymbol.style = processSymbolCss();
+
+exports.ind_process_symbol = IndProcessSymbol;
+//# sourceMappingURL=ind-process-symbol.entry.cjs.js.map
+
+//# sourceMappingURL=ind-process-symbol.cjs.entry.js.map

package/dist/cjs/ind-process-symbol.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-process-symbol.cjs.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,6sCAA6sC,CAAC;;MCWjuC,gBAAgB,GAAA,MAAA;;;;;IAEF,KAAK,GAAuB,QAAQ;;IAEpC,KAAK,GAAuB,QAAQ;;AAErD,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEY,IAAI,GAAsB,IAAI;IAE/C,OAAO,GAAA;AACb,QAAA,QAAQ,IAAI,CAAC,KAAK;AAChB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAOA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;AAC1F,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAOA,OAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,uBAAuB,GAAG;AAClF,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAOA,OAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,kCAAkC,GAAG;AAC7F,YAAA,KAAK,QAAQ;AACb,YAAA;gBACE,OAAOA,OAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG;;;IAI7E,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,YAAY;AACnD,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,EAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,CAAE,EAAA,EACxFD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EACrE,IAAI,CAAC,OAAO,EAAE,EACd,IAAI,CAAC,GAAG,KACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,aAAA,EAAa,QAAQ,EAAA,mBAAA,EAAmB,SAAS,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CACnG,CACG,EACL,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/process-symbol/process-symbol.css?tag=ind-process-symbol&encapsulation=shadow","src/components/atoms/process-symbol/process-symbol.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_w: 44px;\n  --_stroke: var(--ind-surface-border-strong, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"lg\"]) { --_w: 60px; }\n\n:host([state=\"running\"])     { --_stroke: var(--ind-state-running-border, #4ade80); }\n:host([state=\"fault\"])       { --_stroke: var(--ind-state-fault-border, #f87171); }\n:host([state=\"warning\"])     { --_stroke: var(--ind-state-warning-border, #fcd34d); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); }\n\n.symbol {\n  width: var(--_w);\n  height: var(--_w);\n  display: block;\n}\n\n.outline {\n  fill: var(--ind-surface-sunken, light-dark(#fff, #000));\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  vector-effect: non-scaling-stroke;\n}\n\n.tag {\n  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-size: 10px;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProcessSymbolShape = 'circle' | 'square' | 'diamond' | 'hexagon';\nexport type ProcessSymbolState = 'normal' | 'running' | 'fault' | 'warning' | 'maintenance';\nexport type ProcessSymbolSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-process-symbol',\n  styleUrl: 'process-symbol.css',\n  shadow: true,\n})\nexport class IndProcessSymbol {\n  /** ISA-5.1 instrument balloon shape. */\n  @Prop({ reflect: true }) shape: ProcessSymbolShape = 'circle';\n  /** Status coloring. */\n  @Prop({ reflect: true }) state: ProcessSymbolState = 'normal';\n  /** Tag text rendered inside (e.g. \"PT 101\"). */\n  @Prop() tag?: string;\n  /** Caption rendered below the symbol. */\n  @Prop() label?: string;\n  /** Size. */\n  @Prop({ reflect: true }) size: ProcessSymbolSize = 'md';\n\n  private shapeEl() {\n    switch (this.shape) {\n      case 'square':\n        return <rect class=\"outline\" part=\"outline\" x=\"4\" y=\"4\" width=\"40\" height=\"40\" rx=\"2\" />;\n      case 'diamond':\n        return <polygon class=\"outline\" part=\"outline\" points=\"24,3 45,24 24,45 3,24\" />;\n      case 'hexagon':\n        return <polygon class=\"outline\" part=\"outline\" points=\"14,6 34,6 45,24 34,42 14,42 3,24\" />;\n      case 'circle':\n      default:\n        return <circle class=\"outline\" part=\"outline\" cx=\"24\" cy=\"24\" r=\"20\" />;\n    }\n  }\n\n  render() {\n    const name = this.label ?? this.tag ?? 'instrument';\n    return (\n      <Host role=\"img\" aria-label={`${name}${this.state !== 'normal' ? ' — ' + this.state : ''}`}>\n        <svg class=\"symbol\" part=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          {this.shapeEl()}\n          {this.tag && (\n            <text class=\"tag\" x=\"24\" y=\"24\" text-anchor=\"middle\" dominant-baseline=\"central\">{this.tag}</text>\n          )}\n        </svg>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-production-cell.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const productionCellCss = () => `:host{min-width:420px}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const IndProductionCell = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    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 (index.h(index.Host, { key: '35e4fcdd6cb701885f2c78537be16a7ecd8e91ba' }, index.h("div", { key: '76d6be37943e5aa81675df3b2a8bfc49039b32ec', class: "panel-head" }, index.h("ind-status-dot", { key: '3407e7603e49002642fc75617e9519c6adf169d3', state: dot, size: "md" }), index.h("div", { key: 'a6d0d7a42ca56de8b66cb7ea7779894025b6fab4', class: "panel-titles" }, index.h("span", { key: '4b60ee48fefdae0ef2dbad4e3c2b147c27c7cd6f', class: "panel-title", part: "heading" }, this.heading), this.cellId && index.h("span", { key: 'a16755ee33fd0d8da31a3ff87dde88e6fdec174f', class: "panel-subtitle" }, this.cellId)), index.h("div", { key: '6d1c9d2ee8ed24496af1fb5d3832248b90612fb2', class: "panel-actions" }, index.h("slot", { key: '5b0ac0adccd56c0ae2eb9634cc58e7c98de63fb6', name: "actions" }))), index.h("div", { key: '2da43e932bbe6d6690d25d265da175b0d7a4f97b', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, index.h("slot", { key: '1bfbe1ceab5d508e28a6359e6bb105266c776768' }))));
+    }
+};
+IndProductionCell.style = panelCss() + productionCellCss();
+
+exports.ind_production_cell = IndProductionCell;
+//# sourceMappingURL=ind-production-cell.entry.cjs.js.map
+
+//# sourceMappingURL=ind-production-cell.cjs.entry.js.map

package/dist/cjs/ind-production-cell.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-production-cell.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,iBAAiB,GAAG,MAAM,CAAC,6FAA6F,CAAC;;MCalH,iBAAiB,GAAA,MAAA;;;;AACpB,IAAA,OAAO;;AAEP,IAAA,MAAM;;IAEW,KAAK,GAAuB,SAAS;;IAEtD,OAAO,GAAW,CAAC;IAE3B,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK;AAC7D,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,GAAU,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EAC/CA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,MAAM,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,CAC7D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EAACA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAAM,CACpD,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,iBAAA,CAAmB,EAAE,EAAA,EAEzEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-production-cell&encapsulation=shadow","src/components/organisms/production-cell/production-cell.css?tag=ind-production-cell&encapsulation=shadow","src/components/organisms/production-cell/production-cell.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 420px;\n}\n\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n}\n","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"],"version":3}

package/dist/cjs/ind-production-dashboard.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const productionDashboardCss = () => `:host{min-width:520px}`;
+
+const IndProductionDashboard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Production';
+    /** Context subtitle (e.g. "Line 2 · Shift A"). */
+    subtitle;
+    /** Number of grid columns. */
+    columns = 4;
+    render() {
+        return (index.h(index.Host, { key: 'bee0bf466d41d96ba449a47f5b24fbf0d82bdc62' }, index.h("div", { key: 'db5b706d5fa704aaaa3c555f534c03eb4eca35aa', class: "panel-head" }, index.h("div", { key: 'b5937e5a4db9bacb744e75fb53a853e26259cb4a', class: "panel-titles" }, index.h("span", { key: '7c52d8676b46635712dc906d5cb063913cd032ed', class: "panel-title", part: "heading" }, this.heading), this.subtitle && index.h("span", { key: '30f1b6fc4c3a5b5013c40dff32365d713fdc0017', class: "panel-subtitle" }, this.subtitle)), index.h("div", { key: '0aeae273ba718813861d84725e10959c9324ee9a', class: "panel-actions" }, index.h("slot", { key: 'bf3482af0847676d8749ecfd52f3941e2ad85ade', name: "actions" }))), index.h("div", { key: '935b9923c0b4d88bcb0835d099e8ed0687bbb7c3', class: "panel-grid", part: "grid", style: { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` } }, index.h("slot", { key: '630520d4b536738422ca4c7e8f7fba0e834da108' }))));
+    }
+};
+IndProductionDashboard.style = panelCss() + productionDashboardCss();
+
+exports.ind_production_dashboard = IndProductionDashboard;
+//# sourceMappingURL=ind-production-dashboard.entry.cjs.js.map
+
+//# sourceMappingURL=ind-production-dashboard.cjs.entry.js.map

package/dist/cjs/ind-production-dashboard.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-production-dashboard.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,sBAAsB,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCWhD,sBAAsB,GAAA,MAAA;;;;IACzB,OAAO,GAAW,YAAY;;AAE9B,IAAA,QAAQ;;IAER,OAAO,GAAW,CAAC;IAE3B,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACjE,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EAACA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CAAM,CACpD,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,mBAAmB,EAAE,EAAA,EAEzEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-production-dashboard&encapsulation=shadow","src/components/organisms/production-dashboard/production-dashboard.css?tag=ind-production-dashboard&encapsulation=shadow","src/components/organisms/production-dashboard/production-dashboard.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 520px;\n}\n","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"],"version":3}

package/dist/cjs/ind-production-line-overview.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const productionLineOverviewCss = () => `: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}`;
+
+const IndProductionLineOverview = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Production line';
+    stations = [];
+    render() {
+        return (index.h(index.Host, { key: 'acef84fa40b80a710503ad9f3310c954500b7c46' }, index.h("div", { key: '6a473b0aad1ea689c562bcfa8e3ca744e35de922', class: "panel-head" }, index.h("span", { key: '8bcb4d572b94aae2cb3f37e5e08bc41596f6f6d3', class: "panel-title", part: "heading" }, this.heading)), index.h("div", { key: '88742d308c8ba3b58b9a1a5b9b4ee9afed5c1b03', class: "line", part: "line" }, this.stations.map((s, i) => [
+            index.h("div", { class: `station station-${s.state}`, part: "station", key: `s${i}` }, index.h("div", { class: "station-head" }, index.h("ind-status-dot", { state: (s.state === 'unknown' ? 'neutral' : s.state), size: "sm" }), s.tag && index.h("span", { class: "station-tag" }, s.tag)), index.h("span", { class: "station-name" }, s.name), s.rate !== undefined && (index.h("span", { class: "station-rate" }, s.rate, s.unit ? ` ${s.unit}` : ''))),
+            i < this.stations.length - 1 ? (index.h("span", { class: "arrow", part: "arrow", "aria-hidden": "true", key: `a${i}` }, "\u2192")) : null,
+        ]))));
+    }
+};
+IndProductionLineOverview.style = panelCss() + productionLineOverviewCss();
+
+exports.ind_production_line_overview = IndProductionLineOverview;
+//# sourceMappingURL=ind-production-line-overview.entry.cjs.js.map
+
+//# sourceMappingURL=ind-production-line-overview.cjs.entry.js.map

package/dist/cjs/ind-production-line-overview.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-production-line-overview.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,yBAAyB,GAAG,MAAM,CAAC,yvCAAyvC,CAAC;;MCqBtxC,yBAAyB,GAAA,MAAA;;;;IAC5B,OAAO,GAAW,iBAAiB;IACnC,QAAQ,GAAkB,EAAE;IAEpC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CAC1D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK;AAC3B,YAAAA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,gBAAA,EAAmB,CAAC,CAAC,KAAK,CAAA,CAAE,EAAE,IAAI,EAAC,SAAS,EAAC,GAAG,EAAE,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAA,EACnEA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,gBAAA,EAAA,EAAgB,KAAK,GAAG,CAAC,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC,KAAK,CAAQ,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACxF,CAAC,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,CAAC,CAAC,GAAG,CAAQ,CAC9C,EACNA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,IAAE,CAAC,CAAC,IAAI,CAAQ,EACzC,CAAC,CAAC,IAAI,KAAK,SAAS,KACnBA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,GAAG,CAAA,CAAA,EAAI,CAAC,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE,CAAQ,CACvE,CACG;AACN,YAAA,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAC1BA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAC,GAAG,EAAE,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,EAAA,EAAA,QAAA,CAAU,IACxE,IAAI;SACT,CAAC,CACE,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-production-line-overview&encapsulation=shadow","src/components/organisms/production-line-overview/production-line-overview.css?tag=ind-production-line-overview&encapsulation=shadow","src/components/organisms/production-line-overview/production-line-overview.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 520px;\n}\n\n.line {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  overflow-x: auto;\n}\n\n.station {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  min-width: 96px;\n  padding: var(--ind-spacing-4, 8px);\n  background: var(--ind-surface-sunken);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-sm, 2px);\n  border-top: 3px solid var(--ind-surface-border-strong);\n}\n\n.station-fault { border-top-color: var(--ind-state-fault-bg, #dc2626); }\n.station-warning { border-top-color: var(--ind-state-warning-bg, #f59e0b); }\n.station-running { border-top-color: var(--ind-state-running-bg, #16a34a); }\n.station-maintenance { border-top-color: var(--ind-state-maintenance-bg, #2563eb); }\n\n.station-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n}\n\n.station-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-muted);\n}\n\n.station-name {\n  font-size: var(--ind-font-size-base, 12px);\n  font-weight: var(--ind-font-weight-medium, 500);\n}\n\n.station-rate {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.arrow {\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-lg, 14px);\n  flex: 0 0 auto;\n}\n","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"],"version":3}

package/dist/cjs/ind-progress-ring.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const progressRingCss = () => `:host{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:var(--ind-font-family-mono, ui-monospace, monospace);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_size:40px;--_fill:var(--ind-button-primary-bg, #2563eb)}:host([size="sm"]){--_size:28px}:host([size="md"]){--_size:40px}:host([size="lg"]){--_size:56px}:host([variant="success"]){--_fill:var(--ind-feedback-success-bg, #16a34a)}:host([variant="warning"]){--_fill:var(--ind-feedback-warning-bg, #f59e0b)}:host([variant="error"]){--_fill:var(--ind-feedback-error-bg, #dc2626)}.ring{display:block;width:var(--_size);height:var(--_size)}.track{fill:none;stroke:var(--ind-surface-border-default, #2a3340);stroke-width:4}.bar{fill:none;stroke:var(--_fill);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([indeterminate]) .ring{animation:ind-ring-spin 1.1s linear infinite}.value{position:absolute;font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}:host([size="lg"]) .value{font-size:var(--ind-font-size-sm, 11px)}@keyframes ind-ring-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){:host([indeterminate]) .ring{animation-duration:2.4s}}`;
+
+const IndProgressRing = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Current value (0–`max`). */
+    value = 0;
+    /** Max value. */
+    max = 100;
+    /** Color intent. */
+    variant = 'default';
+    /** Size. */
+    size = 'md';
+    /** Indeterminate spinner (no value). */
+    indeterminate = false;
+    /** Show the percentage in the center. */
+    showValue = false;
+    /** Optional unit/suffix when showing the value (defaults to %). */
+    unit;
+    /** Accessible label. */
+    label;
+    r = 16;
+    cx = 20;
+    percent() {
+        if (this.max <= 0)
+            return 0;
+        return Math.min(100, Math.max(0, (this.value / this.max) * 100));
+    }
+    render() {
+        const circumference = 2 * Math.PI * this.r;
+        const pct = this.percent();
+        const offset = circumference * (1 - pct / 100);
+        const centerText = this.unit ? `${Math.round(pct)}${this.unit}` : `${Math.round(pct)}%`;
+        return (index.h(index.Host, { key: 'e117120c3cc822479f06ba401cb850d23d2de8ca', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": this.label }, index.h("svg", { key: 'a695b3827b8bf196340793940581fbd09c63d81f', class: "ring", part: "ring", viewBox: "0 0 40 40", "aria-hidden": "true" }, index.h("circle", { key: 'f6441867ee9f600ffd975d552f7e39a4c96ae841', class: "track", part: "track", cx: this.cx, cy: this.cx, r: this.r }), index.h("circle", { key: '1768950bd68071f2e0a2080d7be4891db0f177ce', class: "bar", part: "bar", cx: this.cx, cy: this.cx, r: this.r, "stroke-dasharray": circumference, "stroke-dashoffset": this.indeterminate ? circumference * 0.7 : offset, transform: `rotate(-90 ${this.cx} ${this.cx})` })), this.showValue && !this.indeterminate && (index.h("span", { key: '9b39b1e3056fe2e203cdd62fbafe0e0213c932a3', class: "value", part: "value" }, centerText))));
+    }
+};
+IndProgressRing.style = progressRingCss();
+
+exports.ind_progress_ring = IndProgressRing;
+//# sourceMappingURL=ind-progress-ring.entry.cjs.js.map
+
+//# sourceMappingURL=ind-progress-ring.cjs.entry.js.map

package/dist/cjs/ind-progress-ring.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-progress-ring.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,q2CAAq2C,CAAC;;MCUx3C,eAAe,GAAA,MAAA;;;;;IAElB,KAAK,GAAW,CAAC;;IAEjB,GAAG,GAAW,GAAG;;IAEA,OAAO,GAAwB,SAAS;;IAExC,IAAI,GAAqB,IAAI;;IAE7B,aAAa,GAAY,KAAK;;IAE/C,SAAS,GAAY,KAAK;;AAE1B,IAAA,IAAI;;AAEJ,IAAA,KAAK;IAEI,CAAC,GAAG,EAAE;IACN,EAAE,GAAG,EAAE;IAEhB,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;QAC3B,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;;IAGlE,MAAM,GAAA;QACJ,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;AAC1C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE;QAC1B,MAAM,MAAM,GAAG,aAAa,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;AAC9C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG;QACvF,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,aAAa,EAAA,eAAA,EACH,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAA,eAAA,EAChD,CAAC,EAAA,eAAA,EACD,GAAG,EAAA,YAAA,EACN,IAAI,CAAC,KAAK,EAAA,EAEtBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EAClEA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAA,CAAI,EAC1EA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,CAAC,EAAE,IAAI,CAAC,CAAC,EAAA,kBAAA,EACS,aAAa,uBACZ,IAAI,CAAC,aAAa,GAAG,aAAa,GAAG,GAAG,GAAG,MAAM,EACpE,SAAS,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAA,CAAG,EAAA,CAC9C,CACE,EACL,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,KACpCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,UAAU,CAAQ,CACrD,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/progress-ring/progress-ring.css?tag=ind-progress-ring&encapsulation=shadow","src/components/atoms/progress-ring/progress-ring.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_size: 40px;\n  --_fill: var(--ind-button-primary-bg, #2563eb);\n}\n\n:host([size=\"sm\"]) { --_size: 28px; }\n:host([size=\"md\"]) { --_size: 40px; }\n:host([size=\"lg\"]) { --_size: 56px; }\n\n:host([variant=\"success\"]) { --_fill: var(--ind-feedback-success-bg, #16a34a); }\n:host([variant=\"warning\"]) { --_fill: var(--ind-feedback-warning-bg, #f59e0b); }\n:host([variant=\"error\"])   { --_fill: var(--ind-feedback-error-bg, #dc2626); }\n\n.ring {\n  display: block;\n  width: var(--_size);\n  height: var(--_size);\n}\n\n.track {\n  fill: none;\n  stroke: var(--ind-surface-border-default, #2a3340);\n  stroke-width: 4;\n}\n\n.bar {\n  fill: none;\n  stroke: var(--_fill);\n  stroke-width: 4;\n  stroke-linecap: round;\n  transition: stroke-dashoffset var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n:host([indeterminate]) .ring {\n  animation: ind-ring-spin 1.1s linear infinite;\n}\n\n.value {\n  position: absolute;\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n:host([size=\"lg\"]) .value { font-size: var(--ind-font-size-sm, 11px); }\n\n@keyframes ind-ring-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .ring { animation-duration: 2.4s; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProgressRingVariant = 'default' | 'success' | 'warning' | 'error';\nexport type ProgressRingSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-progress-ring',\n  styleUrl: 'progress-ring.css',\n  shadow: true,\n})\nexport class IndProgressRing {\n  /** Current value (0–`max`). */\n  @Prop() value: number = 0;\n  /** Max value. */\n  @Prop() max: number = 100;\n  /** Color intent. */\n  @Prop({ reflect: true }) variant: ProgressRingVariant = 'default';\n  /** Size. */\n  @Prop({ reflect: true }) size: ProgressRingSize = 'md';\n  /** Indeterminate spinner (no value). */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  /** Show the percentage in the center. */\n  @Prop() showValue: boolean = false;\n  /** Optional unit/suffix when showing the value (defaults to %). */\n  @Prop() unit?: string;\n  /** Accessible label. */\n  @Prop() label?: string;\n\n  private readonly r = 16;\n  private readonly cx = 20;\n\n  private percent(): number {\n    if (this.max <= 0) return 0;\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100));\n  }\n\n  render() {\n    const circumference = 2 * Math.PI * this.r;\n    const pct = this.percent();\n    const offset = circumference * (1 - pct / 100);\n    const centerText = this.unit ? `${Math.round(pct)}${this.unit}` : `${Math.round(pct)}%`;\n    return (\n      <Host\n        role=\"progressbar\"\n        aria-valuenow={this.indeterminate ? undefined : Math.round(pct)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={this.label}\n      >\n        <svg class=\"ring\" part=\"ring\" viewBox=\"0 0 40 40\" aria-hidden=\"true\">\n          <circle class=\"track\" part=\"track\" cx={this.cx} cy={this.cx} r={this.r} />\n          <circle\n            class=\"bar\"\n            part=\"bar\"\n            cx={this.cx}\n            cy={this.cx}\n            r={this.r}\n            stroke-dasharray={circumference}\n            stroke-dashoffset={this.indeterminate ? circumference * 0.7 : offset}\n            transform={`rotate(-90 ${this.cx} ${this.cx})`}\n          />\n        </svg>\n        {this.showValue && !this.indeterminate && (\n          <span class=\"value\" part=\"value\">{centerText}</span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-progress.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 
 const progressCss = () => `:host{display:block;font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_h:8px;--_fill:var(--ind-button-primary-bg, #2563eb)}:host([size="sm"]){--_h:4px}:host([size="md"]){--_h:8px}:host([size="lg"]){--_h:12px}:host([variant="success"]){--_fill:var(--ind-feedback-success-bg, #16a34a)}:host([variant="warning"]){--_fill:var(--ind-feedback-warning-bg, #f59e0b)}:host([variant="error"]){--_fill:var(--ind-feedback-error-bg, #dc2626)}.header{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ind-spacing-3, 6px);margin-bottom:var(--ind-spacing-2, 4px)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.value{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.track{position:relative;width:100%;height:var(--_h);background:var(--ind-surface-sunken, light-dark(#ffffff, #000000));border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-sm, 2px);overflow:hidden}.fill{display:block;height:100%;background:var(--_fill);transition:width var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}:host([indeterminate]) .fill{width:30%;animation:ind-progress-march 1.4s ease-in-out infinite}@keyframes ind-progress-march{0%{margin-left:-30%}100%{margin-left:100%}}@media (prefers-reduced-motion: reduce){:host([indeterminate]) .fill{animation:none;width:100%;opacity:0.5}}`;
 
@@ -37,7 +37,7 @@ const IndProgress = class {
     }
     render() {
         const pct = this.percent();
-        return (index.h(index.Host, { key: '0e74d2952b1fe8b2356927e0e38adbcb72d863c6', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label }, (this.label || this.showValue) && (index.h("div", { key: '1fbeb6fed63ac3fb1cb830408d6ee851ec9fe989', class: "header", part: "header" }, this.label && index.h("span", { key: '1a2a0e6bb58c4e69b5b19587906e7c53720587cb', class: "label", part: "label" }, this.label), this.showValue && !this.indeterminate && (index.h("span", { key: '7fa1c9ce1e0ec68abc1b478cfb373af8266467a3', class: "value", part: "value" }, this.valueLabel())))), index.h("div", { key: 'e821a5f203432e33199d111ba807eb6106068b14', class: "track", part: "track" }, index.h("div", { key: '88e1e2728d12adea9220b3cf8f68072e85bdc1dd', class: "fill", part: "fill", style: this.indeterminate ? undefined : { width: `${pct}%` } }))));
+        return (index.h(index.Host, { key: '97a35a339db17e295b11d1fe68f0024a44a5dc26', role: "progressbar", "aria-valuenow": this.indeterminate ? undefined : this.value, "aria-valuemin": 0, "aria-valuemax": this.max, "aria-label": this.label }, (this.label || this.showValue) && (index.h("div", { key: 'bfc9bc977d571e39c01c1342e6aa3c1897284f48', class: "header", part: "header" }, this.label && index.h("span", { key: '276b5bee53c566109d62946546320e85e61ea5f2', class: "label", part: "label" }, this.label), this.showValue && !this.indeterminate && (index.h("span", { key: 'dcbe59da993f2f88989e352dcf3aaeb3f6d1e286', class: "value", part: "value" }, this.valueLabel())))), index.h("div", { key: '3ace595c028a654ae027d44a96b738bf923bfcbf', class: "track", part: "track" }, index.h("div", { key: 'db526a2dc6a655090cf338f405415f61912cc4c2', class: "fill", part: "fill", style: this.indeterminate ? undefined : { width: `${pct}%` } }))));
     }
 };
 IndProgress.style = progressCss();

package/dist/cjs/ind-pump-card.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+
+const equipmentCardCss = () => `.body{display:flex;align-items:center;gap:var(--ind-spacing-5, 12px)}.symbol{flex:0 0 auto}.metrics{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);margin-left:auto;align-items:flex-end;text-align:right}`;
+
+const pumpCardCss = () => `:host{min-width:200px}`;
+
+const IndPumpCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Equipment tag (e.g. "P-101"). */
+    tag;
+    /** Human label (e.g. "Feed pump"). */
+    label;
+    /** Process state — `running` animates the impeller, drives fault chrome. */
+    state = 'stopped';
+    /** Flow rate. */
+    flow;
+    /** Flow unit (default m³/h). */
+    flowUnit = 'm³/h';
+    /** Discharge pressure. */
+    pressure;
+    /** Pressure unit (default bar). */
+    pressureUnit = 'bar';
+    render() {
+        const name = this.label ?? this.tag ?? 'Pump';
+        return (index.h(index.Host, { key: '8fb545e6ac8a37e077984192fdce0dd9b7bdcceb', role: "group", "aria-label": `${name} — ${this.state}` }, index.h("div", { key: 'c98476ef85c1884e3a38a4af9e909d2dab0b02f2', class: "card-head" }, index.h("span", { key: '0353760dbe863230c512b559824429a4fa56e4cb', class: "card-title", part: "label" }, name), this.tag && index.h("span", { key: '860243b936398752a4399bd6a04f09e9e7b01988', class: "card-tag", part: "tag" }, this.tag)), index.h("div", { key: 'e95d0f3e3fccec39588126ff4bded6c2b4b6e93c', class: "body", part: "body" }, index.h("ind-pump", { key: 'a87093f9a8eabb59b3163d2f1dd5515b38228816', class: "symbol", state: this.state, size: "md" }), index.h("div", { key: '7ebb806b382a065cc78fb8defa78258d071f618e', class: "metrics", part: "metrics" }, this.flow !== undefined && (index.h("ind-value", { key: '12ebaa3a61e42bd2862b8b7a19c68fd334bec747', value: this.flow, unit: this.flowUnit, precision: 1, label: "Flow", size: "md" })), this.pressure !== undefined && (index.h("ind-value", { key: '417d7e38283f9a48f3fb2a4dc1f8adf058af481c', value: this.pressure, unit: this.pressureUnit, precision: 2, label: "Pressure", size: "sm" }))))));
+    }
+};
+IndPumpCard.style = cardCss() + (equipmentCardCss() + pumpCardCss());
+
+exports.ind_pump_card = IndPumpCard;
+//# sourceMappingURL=ind-pump-card.entry.cjs.js.map
+
+//# sourceMappingURL=ind-pump-card.cjs.entry.js.map

package/dist/cjs/ind-pump-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-pump-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,4NAA4N,CAAC;;ACA7P,MAAM,WAAW,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCWrC,WAAW,GAAA,MAAA;;;;;AAEd,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEY,KAAK,GAAmB,SAAS;;AAElD,IAAA,IAAI;;IAEJ,QAAQ,GAAW,MAAM;;AAEzB,IAAA,QAAQ;;IAER,YAAY,GAAW,KAAK;IAEpC,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM;QAC7C,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACtDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAQ,EAClD,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3BA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACxDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChC,IAAI,CAAC,IAAI,KAAK,SAAS,KACtBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1F,EACA,IAAI,CAAC,QAAQ,KAAK,SAAS,KAC1BA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACtG,CACG,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/card.css?tag=ind-pump-card&encapsulation=shadow","src/components/molecules/_shared/equipment-card.css?tag=ind-pump-card&encapsulation=shadow","src/components/molecules/pump-card/pump-card.css?tag=ind-pump-card&encapsulation=shadow","src/components/molecules/pump-card/pump-card.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  box-sizing: border-box;\n  min-width: 160px;\n}\n\n.card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n","/* Shared layout for the equipment faceplate cards (motor, pump, valve, tank).\n * Loaded after card.css and before each component's own sheet. */\n.body {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-5, 12px);\n}\n\n.symbol {\n  flex: 0 0 auto;\n}\n\n.metrics {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  margin-left: auto;\n  align-items: flex-end;\n  text-align: right;\n}\n",":host {\n  min-width: 200px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState } from '../../atoms/_equipment/types';\n\n/**\n * Pump faceplate: animated `<ind-pump>` symbol plus flow / pressure readouts.\n */\n@Component({\n  tag: 'ind-pump-card',\n  styleUrls: ['../_shared/card.css', '../_shared/equipment-card.css', 'pump-card.css'],\n  shadow: true,\n})\nexport class IndPumpCard {\n  /** Equipment tag (e.g. \"P-101\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Feed pump\"). */\n  @Prop() label?: string;\n  /** Process state — `running` animates the impeller, drives fault chrome. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Flow rate. */\n  @Prop() flow?: number;\n  /** Flow unit (default m³/h). */\n  @Prop() flowUnit: string = 'm³/h';\n  /** Discharge pressure. */\n  @Prop() pressure?: number;\n  /** Pressure unit (default bar). */\n  @Prop() pressureUnit: string = 'bar';\n\n  render() {\n    const name = this.label ?? this.tag ?? 'Pump';\n    return (\n      <Host role=\"group\" aria-label={`${name} — ${this.state}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{name}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <ind-pump class=\"symbol\" state={this.state} size=\"md\" />\n          <div class=\"metrics\" part=\"metrics\">\n            {this.flow !== undefined && (\n              <ind-value value={this.flow} unit={this.flowUnit} precision={1} label=\"Flow\" size=\"md\" />\n            )}\n            {this.pressure !== undefined && (\n              <ind-value value={this.pressure} unit={this.pressureUnit} precision={2} label=\"Pressure\" size=\"sm\" />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-pump-control-panel.cjs.entry.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const controlPanelCss = () => `.panel-body>ind-motor-card,.panel-body>ind-pump-card,.panel-body>ind-valve-card,.panel-body>ind-start-stop-control,.panel-body>ind-setpoint-control,.panel-body>ind-speed-control,.panel-body>ind-mode-selector,.panel-body>ind-recipe-selector{border:0;padding:0;background:transparent;min-width:0}`;
+
+const pumpControlPanelCss = () => `:host{min-width:280px}`;
+
+const IndPumpControlPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indStart = index.createEvent(this, "indStart");
+        this.indStop = index.createEvent(this, "indStop");
+        this.indMode = index.createEvent(this, "indMode");
+    }
+    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 (index.h(index.Host, { key: 'd8912bba9bd856bd8d7441725e604a198af9cfad' }, index.h("div", { key: 'c2753a9668b3664af68836a35094280701dcbcf5', class: "panel-head" }, index.h("div", { key: 'd496718af739b6146b1a2488eb2546267d4c0e31', class: "panel-titles" }, index.h("span", { key: 'ac679e3704a44465ab547f5dda0a6ad6d7230f61', class: "panel-title", part: "heading" }, this.heading), this.tag && index.h("span", { key: '38aca6f60bf902877172a590d174896120efb07d', class: "panel-subtitle" }, this.tag))), index.h("div", { key: '7a388aa6bc9aef0e4a1ac7172d64ea673bf0b72a', class: "panel-body" }, index.h("ind-pump-card", { key: '068a75833a8476b9146d90127027b7b05d49d287', tag: this.tag, label: this.heading, state: this.state, flow: this.flow, pressure: this.pressure }), index.h("ind-start-stop-control", { key: '6711c260e7f9cb982a15f1efcc2e904f4a04bae5', label: this.heading, state: this.runState(), onIndStart: () => this.indStart.emit(), onIndStop: () => this.indStop.emit() }), index.h("ind-mode-selector", { key: '3b35daf8000b0cee1e3ba7e3724859bd07e79751', value: this.mode, onIndChange: this.onMode }))));
+    }
+};
+IndPumpControlPanel.style = panelCss() + (controlPanelCss() + pumpControlPanelCss());
+
+exports.ind_pump_control_panel = IndPumpControlPanel;
+//# sourceMappingURL=ind-pump-control-panel.entry.cjs.js.map
+
+//# sourceMappingURL=ind-pump-control-panel.cjs.entry.js.map

package/dist/cjs/ind-pump-control-panel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-pump-control-panel.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,eAAe,GAAG,MAAM,CAAC,sSAAsS,CAAC;;ACAtU,MAAM,mBAAmB,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCY7C,mBAAmB,GAAA,MAAA;;;;;;;IACtB,OAAO,GAAW,MAAM;AACxB,IAAA,GAAG;IACc,KAAK,GAAmB,SAAS;AAClD,IAAA,IAAI;AACJ,IAAA,QAAQ;AACR,IAAA,IAAI;AAEH,IAAA,QAAQ;AACR,IAAA,OAAO;AACP,IAAA,OAAO;IAER,QAAQ,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;AAAE,YAAA,OAAO,SAAS;AAC9C,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO;AAAE,YAAA,OAAO,OAAO;AAC1C,QAAA,OAAO,SAAS;;AAGV,IAAA,MAAM,GAAG,CAAC,CAAsB,KAAI;QAC1C,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7B,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CACvD,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,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,EAAA,CACvB,EACFA,OAAA,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,UAAU,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EACtC,SAAS,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CACpC,EACFA,OAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAA,CAAI,CAC7D,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-pump-control-panel&encapsulation=shadow","src/components/organisms/_shared/control-panel.css?tag=ind-pump-control-panel&encapsulation=shadow","src/components/organisms/pump-control-panel/pump-control-panel.css?tag=ind-pump-control-panel&encapsulation=shadow","src/components/organisms/pump-control-panel/pump-control-panel.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n","/* Flatten the faceplate / control molecules when embedded in a control panel,\n * so the panel provides the single card chrome. */\n.panel-body > ind-motor-card,\n.panel-body > ind-pump-card,\n.panel-body > ind-valve-card,\n.panel-body > ind-start-stop-control,\n.panel-body > ind-setpoint-control,\n.panel-body > ind-speed-control,\n.panel-body > ind-mode-selector,\n.panel-body > ind-recipe-selector {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n",":host {\n  min-width: 280px;\n}\n","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"],"version":3}

package/dist/cjs/ind-pump.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const equipmentCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:48px;--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="md"]){--_w:48px}:host([size="lg"]){--_w:72px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80);--_fill:var(--ind-state-running-bg, #16a34a);--_accent:var(--ind-state-running-bg, #16a34a)}:host([state="stopped"]){--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171);--_fill:var(--ind-state-fault-bg, #dc2626);--_accent:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-warning-bg, #f59e0b);--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa);--_fill:var(--ind-state-maintenance-bg, #2563eb);--_accent:var(--ind-state-maintenance-bg, #2563eb)}.symbol{display:block;width:var(--_w);height:auto;overflow:visible}.body{fill:color-mix(in srgb, var(--_fill) 22%, transparent);stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.accent{fill:var(--_accent);stroke:none}.stroke{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.tag{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px)}@media (prefers-reduced-motion: reduce){.spin,.pulse{animation:none !important}}`;
+
+const pumpCss = () => `:host([state="running"]) .spin{animation:ind-pump-spin 1.6s linear infinite}@keyframes ind-pump-spin{to{transform:rotate(360deg)}}`;
+
+const IndPump = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Process state. `running` animates the impeller. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "P-101"). */
+    tag;
+    /** Human label (e.g. "Feed pump"). */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'pump';
+        return (index.h(index.Host, { key: 'c94d1f1822da5bb07293f43541481de5f3cc52dd', role: "img", "aria-label": `${name} — ${this.state}` }, index.h("svg", { key: '183f70a7dd2677df2f364ba67578f780422fbf69', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, index.h("circle", { key: 'e81a8a03649e3a8e17327f6d27992613393e381d', class: "body", cx: "22", cy: "24", r: "14" }), index.h("polygon", { key: '55f3562be5b500dfb5dcf49833fa2d537d05555f', class: "accent", points: "22,24 38,16 38,32" }), index.h("g", { key: 'f8db2b0032ba389cbad360c4a5b60ac286f1cddb', class: "spin", style: { transformOrigin: '22px 24px' } }, index.h("line", { key: 'ca98c47805ecd193cd74ebc7704b7056ad6dd7b1', class: "stroke", x1: "22", y1: "14", x2: "22", y2: "34" }), index.h("line", { key: '4b0cdfa1d2ddd30328f16fb97a12c87b9f900a49', class: "stroke", x1: "12", y1: "24", x2: "32", y2: "24" }))), (this.tag || this.label) && (index.h("div", { key: '6eae6c4f9de61beaadc795f265901fd60ce52700', class: "caption" }, this.tag && index.h("span", { key: 'd0d7b89021ccac34de8a5c7494e0ba93b2d97389', class: "tag" }, this.tag), this.label && index.h("span", { key: '3e594c3bae463c699a91f05f5cb00d01ad278c88', class: "label" }, this.label)))));
+    }
+};
+IndPump.style = equipmentCss() + pumpCss();
+
+exports.ind_pump = IndPump;
+//# sourceMappingURL=ind-pump.entry.cjs.js.map
+
+//# sourceMappingURL=ind-pump.cjs.entry.js.map

package/dist/cjs/ind-pump.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-pump.cjs.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ypEAAypE,CAAC;;ACAtrE,MAAM,OAAO,GAAG,MAAM,CAAC,kIAAkI,CAAC;;MCQ7I,OAAO,GAAA,MAAA;;;;;IAEO,KAAK,GAAmB,SAAS;;IAEjC,IAAI,GAAkB,IAAI;;AAE3C,IAAA,GAAG;;AAEH,IAAA,KAAK;IAEb,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,MAAM;AAC7C,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAEpDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxDA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAC9CA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,mBAAmB,EAAA,CAAG,EACrDA,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAAA,EACrDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACvDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,CACrD,CACA,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,MACtBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC/C,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/_equipment/equipment.css?tag=ind-pump&encapsulation=shadow","src/components/atoms/pump/pump.css?tag=ind-pump&encapsulation=shadow","src/components/atoms/pump/pump.tsx"],"sourcesContent":["/* Shared base styles for ind-ds process-equipment symbols.\n * Referenced via styleUrls alongside each component's own CSS. */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_w: 48px;\n  --_stroke: var(--ind-state-stopped-border, #8390a0);\n  --_fill: var(--ind-state-stopped-bg, #5a6776);\n  --_accent: var(--ind-state-stopped-bg, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"md\"]) { --_w: 48px; }\n:host([size=\"lg\"]) { --_w: 72px; }\n\n:host([state=\"running\"])     { --_stroke: var(--ind-state-running-border, #4ade80); --_fill: var(--ind-state-running-bg, #16a34a); --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"stopped\"])     { --_stroke: var(--ind-state-stopped-border, #8390a0); --_fill: var(--ind-state-stopped-bg, #5a6776); --_accent: var(--ind-state-stopped-bg, #5a6776); }\n:host([state=\"fault\"])       { --_stroke: var(--ind-state-fault-border, #f87171); --_fill: var(--ind-state-fault-bg, #dc2626); --_accent: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"])     { --_stroke: var(--ind-state-warning-border, #fcd34d); --_fill: var(--ind-state-warning-bg, #f59e0b); --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); --_fill: var(--ind-state-maintenance-bg, #2563eb); --_accent: var(--ind-state-maintenance-bg, #2563eb); }\n\n.symbol {\n  display: block;\n  width: var(--_w);\n  height: auto;\n  overflow: visible;\n}\n\n.body {\n  fill: color-mix(in srgb, var(--_fill) 22%, transparent);\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  vector-effect: non-scaling-stroke;\n}\n\n.accent {\n  fill: var(--_accent);\n  stroke: none;\n}\n\n.stroke {\n  fill: none;\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  vector-effect: non-scaling-stroke;\n}\n\n.caption {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  font-size: var(--ind-font-size-xs, 10px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .spin, .pulse { animation: none !important; }\n}\n",":host([state=\"running\"]) .spin {\n  animation: ind-pump-spin 1.6s linear infinite;\n}\n\n@keyframes ind-pump-spin {\n  to { transform: rotate(360deg); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-pump',\n  styleUrls: ['../_equipment/equipment.css', 'pump.css'],\n  shadow: true,\n})\nexport class IndPump {\n  /** Process state. `running` animates the impeller. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"P-101\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Feed pump\"). */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'pump';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        {/* ISA centrifugal pump: circle body + triangular discharge. */}\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"22\" cy=\"24\" r=\"14\" />\n          <polygon class=\"accent\" points=\"22,24 38,16 38,32\" />\n          <g class=\"spin\" style={{ transformOrigin: '22px 24px' }}>\n            <line class=\"stroke\" x1=\"22\" y1=\"14\" x2=\"22\" y2=\"34\" />\n            <line class=\"stroke\" x1=\"12\" y1=\"24\" x2=\"32\" y2=\"24\" />\n          </g>\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-recipe-management-panel.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const controlPanelCss = () => `.panel-body>ind-motor-card,.panel-body>ind-pump-card,.panel-body>ind-valve-card,.panel-body>ind-start-stop-control,.panel-body>ind-setpoint-control,.panel-body>ind-speed-control,.panel-body>ind-mode-selector,.panel-body>ind-recipe-selector{border:0;padding:0;background:transparent;min-width:0}`;
+
+const recipeManagementPanelCss = () => `: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)}`;
+
+const IndRecipeManagementPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indChange = index.createEvent(this, "indChange");
+        this.indLoad = index.createEvent(this, "indLoad");
+        this.indSave = index.createEvent(this, "indSave");
+    }
+    heading = 'Recipe management';
+    /** Available recipes. */
+    recipes = [];
+    /** Selected recipe (two-way). */
+    value;
+    /** Parameters of the selected recipe. */
+    parameters = [];
+    /** Allow editing the parameters. */
+    editable = false;
+    indChange;
+    indLoad;
+    indSave;
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    onLoad = (e) => {
+        e.stopPropagation();
+        this.indLoad.emit(e.detail);
+    };
+    render() {
+        return (index.h(index.Host, { key: '311d5f0738f97dc9644bfe14e6df5ee107132e80' }, index.h("div", { key: '8607f97cedf5ae4d8e9c1a321b8aba04d7d68344', class: "panel-head" }, index.h("span", { key: '2662cd5984dd0e1cef9231101451606fba385153', class: "panel-title", part: "heading" }, this.heading), index.h("div", { key: 'a9e120fbef91e4899e3340db5aa600b3d4a4737d', class: "panel-actions" }, index.h("ind-button", { key: '49dde298969047d4b94d4d58152987f42cb15863', variant: "primary", size: "sm", label: "Save", disabled: !this.editable, onIndActivate: () => this.indSave.emit() }))), index.h("div", { key: '792a6a721b2a7a2f98160bccee674b0449f1d3df', class: "panel-body" }, index.h("ind-recipe-selector", { key: '32ad3a8d71a5e3c0c28f716c94159a40bcd24c69', label: "Recipe", options: this.recipes, value: this.value, onIndChange: this.onChange, onIndLoad: this.onLoad }), this.parameters.length > 0 && (index.h("div", { key: 'b63fa62ebe8eb41f4d7a199229ad411a38aa2573', class: "params", part: "params" }, this.parameters.map((p, i) => (index.h("ind-batch-parameter-row", { key: i, label: p.label, value: p.value, unit: p.unit, target: p.target, disabled: !this.editable }))))))));
+    }
+};
+IndRecipeManagementPanel.style = panelCss() + (controlPanelCss() + recipeManagementPanelCss());
+
+exports.ind_recipe_management_panel = IndRecipeManagementPanel;
+//# sourceMappingURL=ind-recipe-management-panel.entry.cjs.js.map
+
+//# sourceMappingURL=ind-recipe-management-panel.cjs.entry.js.map

package/dist/cjs/ind-recipe-management-panel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-recipe-management-panel.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,eAAe,GAAG,MAAM,CAAC,sSAAsS,CAAC;;ACAtU,MAAM,wBAAwB,GAAG,MAAM,CAAC,2JAA2J,CAAC;;MCavL,wBAAwB,GAAA,MAAA;;;;;;;IAC3B,OAAO,GAAW,mBAAmB;;IAErC,OAAO,GAAmB,EAAE;;AAEX,IAAA,KAAK;;IAEtB,UAAU,GAAiB,EAAE;;IAE7B,QAAQ,GAAY,KAAK;AAExB,IAAA,SAAS;AACT,IAAA,OAAO;AACP,IAAA,OAAO;AAER,IAAA,QAAQ,GAAG,CAAC,CAAsB,KAAI;QAC5C,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC/B,KAAC;AACO,IAAA,MAAM,GAAG,CAAC,CAAsB,KAAI;QAC1C,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7B,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC9DA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EACxB,aAAa,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CACxC,CACE,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAE,IAAI,CAAC,MAAM,EAAA,CACtB,EACD,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,KACzBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACxBA,OAAA,CAAA,yBAAA,EAAA,EACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,MAAM,EAAE,CAAC,CAAC,MAAM,EAChB,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAA,CACxB,CACH,CAAC,CACE,CACP,CACG,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-recipe-management-panel&encapsulation=shadow","src/components/organisms/_shared/control-panel.css?tag=ind-recipe-management-panel&encapsulation=shadow","src/components/organisms/recipe-management-panel/recipe-management-panel.css?tag=ind-recipe-management-panel&encapsulation=shadow","src/components/organisms/recipe-management-panel/recipe-management-panel.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n","/* Flatten the faceplate / control molecules when embedded in a control panel,\n * so the panel provides the single card chrome. */\n.panel-body > ind-motor-card,\n.panel-body > ind-pump-card,\n.panel-body > ind-valve-card,\n.panel-body > ind-start-stop-control,\n.panel-body > ind-setpoint-control,\n.panel-body > ind-speed-control,\n.panel-body > ind-mode-selector,\n.panel-body > ind-recipe-selector {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n",":host {\n  min-width: 340px;\n}\n\n.params {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--ind-surface-border-subtle);\n  border-radius: var(--ind-radius-sm, 2px);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { SelectOption } from '../../atoms/select/select';\nimport type { BatchParam } from '../batch-control-panel/batch-control-panel';\n\n/**\n * Recipe management panel: pick / load a recipe, review its parameter set and\n * save edits. Combines `<ind-recipe-selector>` with a parameter list.\n */\n@Component({\n  tag: 'ind-recipe-management-panel',\n  styleUrls: ['../_shared/panel.css', '../_shared/control-panel.css', 'recipe-management-panel.css'],\n  shadow: true,\n})\nexport class IndRecipeManagementPanel {\n  @Prop() heading: string = 'Recipe management';\n  /** Available recipes. */\n  @Prop() recipes: SelectOption[] = [];\n  /** Selected recipe (two-way). */\n  @Prop({ mutable: true }) value?: string;\n  /** Parameters of the selected recipe. */\n  @Prop() parameters: BatchParam[] = [];\n  /** Allow editing the parameters. */\n  @Prop() editable: boolean = false;\n\n  @Event() indChange!: EventEmitter<string>;\n  @Event() indLoad!: EventEmitter<string>;\n  @Event() indSave!: EventEmitter<void>;\n\n  private onChange = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indChange.emit(e.detail);\n  };\n  private onLoad = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.indLoad.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n          <div class=\"panel-actions\">\n            <ind-button\n              variant=\"primary\"\n              size=\"sm\"\n              label=\"Save\"\n              disabled={!this.editable}\n              onIndActivate={() => this.indSave.emit()}\n            />\n          </div>\n        </div>\n        <div class=\"panel-body\">\n          <ind-recipe-selector\n            label=\"Recipe\"\n            options={this.recipes}\n            value={this.value}\n            onIndChange={this.onChange}\n            onIndLoad={this.onLoad}\n          />\n          {this.parameters.length > 0 && (\n            <div class=\"params\" part=\"params\">\n              {this.parameters.map((p, i) => (\n                <ind-batch-parameter-row\n                  key={i}\n                  label={p.label}\n                  value={p.value}\n                  unit={p.unit}\n                  target={p.target}\n                  disabled={!this.editable}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}