@ind-ds/core 0.1.1 → 0.2.0

package/dist/cjs/ind-alarm-badge-group.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const alarmBadgeGroupCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.pill{display:inline-flex;align-items:stretch;border-radius:var(--ind-radius-sm, 2px);overflow:hidden;font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-bold, 700);line-height:1;border:1px solid transparent}.pill-label{padding:3px 5px;color:var(--ind-color-palette-neutral-1000, #fff)}.pill-count{padding:3px 6px;background:var(--ind-surface-raised);color:var(--ind-surface-text-primary);min-width:1.2em;text-align:center}.pill-high-high .pill-label{background:var(--ind-alarm-high-high-bg, #dc2626)}.pill-high-high{border-color:var(--ind-alarm-high-high-border, #f87171)}.pill-high .pill-label{background:var(--ind-alarm-high-bg, #f59e0b);color:var(--ind-alarm-high-fg, #000)}.pill-high{border-color:var(--ind-alarm-high-border, #fcd34d)}.pill-low .pill-label{background:var(--ind-alarm-low-bg, #0891b2)}.pill-low{border-color:var(--ind-alarm-low-border, #22d3ee)}.pill-low-low .pill-label{background:var(--ind-alarm-low-low-bg, #7c3aed)}.pill-low-low{border-color:var(--ind-alarm-low-low-border, #a78bfa)}.pill-total .pill-label{background:var(--ind-surface-border-strong, #5a6776)}.pill-total{border-color:var(--ind-surface-border-strong, #5a6776)}`;
+
+const IndAlarmBadgeGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** High-high count. */
+    highHigh = 0;
+    /** High count. */
+    high = 0;
+    /** Low count. */
+    low = 0;
+    /** Low-low count. */
+    lowLow = 0;
+    /** Hide priorities whose count is zero. */
+    hideZero = false;
+    /** Append a total pill. */
+    showTotal = false;
+    get total() {
+        return this.highHigh + this.high + this.low + this.lowLow;
+    }
+    render() {
+        const items = [
+            { key: 'high-high', label: 'HH', count: this.highHigh },
+            { key: 'high', label: 'H', count: this.high },
+            { key: 'low', label: 'L', count: this.low },
+            { key: 'low-low', label: 'LL', count: this.lowLow },
+        ].filter((i) => !this.hideZero || i.count > 0);
+        return (index.h(index.Host, { key: '201a3706da7e4d7861c46d089f0640c2b9fb23f4', role: "group", "aria-label": `${this.total} active alarms` }, items.map((i) => (index.h("span", { class: `pill pill-${i.key}`, part: "pill", key: i.key }, index.h("span", { class: "pill-label", part: "pill-label" }, i.label), index.h("span", { class: "pill-count", part: "pill-count" }, i.count)))), this.showTotal && (index.h("span", { key: '12adde650a7be127226d5d65b6981008d3e72484', class: "pill pill-total", part: "total" }, index.h("span", { key: '624406d463a074110c7e11bb26af668e85a6ed71', class: "pill-label" }, "\u03A3"), index.h("span", { key: '23b0c696feb5cb9dbb38c41d9185e6f1e8c4ee4d', class: "pill-count" }, this.total)))));
+    }
+};
+IndAlarmBadgeGroup.style = alarmBadgeGroupCss();
+
+exports.ind_alarm_badge_group = IndAlarmBadgeGroup;
+//# sourceMappingURL=ind-alarm-badge-group.entry.cjs.js.map
+
+//# sourceMappingURL=ind-alarm-badge-group.cjs.entry.js.map

package/dist/cjs/ind-alarm-badge-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-alarm-badge-group.cjs.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,y0CAAy0C,CAAC;;MCW/1C,kBAAkB,GAAA,MAAA;;;;;IAErB,QAAQ,GAAW,CAAC;;IAEpB,IAAI,GAAW,CAAC;;IAEhB,GAAG,GAAW,CAAC;;IAEf,MAAM,GAAW,CAAC;;IAElB,QAAQ,GAAY,KAAK;;IAEzB,SAAS,GAAY,KAAK;AAElC,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;;IAG3D,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;AACvD,YAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE;AAC7C,YAAA,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE;AAC3C,YAAA,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;AACpD,SAAA,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;AAE9C,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,KAAK,gBAAgB,EAAA,EACzD,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MACXD,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,CAAA,UAAA,EAAa,CAAC,CAAC,GAAG,CAAA,CAAE,EAAE,IAAI,EAAC,MAAM,EAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAA,EACvDA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,EAAA,EAAE,CAAC,CAAC,KAAK,CAAQ,EAC3DA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,EAAA,EAAE,CAAC,CAAC,KAAK,CAAQ,CACtD,CACR,CAAC,EACD,IAAI,CAAC,SAAS,KACbA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,EAAA,EACxCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAA,QAAA,CAAS,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACvC,CACR,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/alarm-badge-group/alarm-badge-group.css?tag=ind-alarm-badge-group&encapsulation=shadow","src/components/molecules/alarm-badge-group/alarm-badge-group.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.pill {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--ind-radius-sm, 2px);\n  overflow: hidden;\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  line-height: 1;\n  border: 1px solid transparent;\n}\n\n.pill-label {\n  padding: 3px 5px;\n  color: var(--ind-color-palette-neutral-1000, #fff);\n}\n\n.pill-count {\n  padding: 3px 6px;\n  background: var(--ind-surface-raised);\n  color: var(--ind-surface-text-primary);\n  min-width: 1.2em;\n  text-align: center;\n}\n\n.pill-high-high .pill-label { background: var(--ind-alarm-high-high-bg, #dc2626); }\n.pill-high-high { border-color: var(--ind-alarm-high-high-border, #f87171); }\n.pill-high .pill-label { background: var(--ind-alarm-high-bg, #f59e0b); color: var(--ind-alarm-high-fg, #000); }\n.pill-high { border-color: var(--ind-alarm-high-border, #fcd34d); }\n.pill-low .pill-label { background: var(--ind-alarm-low-bg, #0891b2); }\n.pill-low { border-color: var(--ind-alarm-low-border, #22d3ee); }\n.pill-low-low .pill-label { background: var(--ind-alarm-low-low-bg, #7c3aed); }\n.pill-low-low { border-color: var(--ind-alarm-low-low-border, #a78bfa); }\n\n.pill-total .pill-label { background: var(--ind-surface-border-strong, #5a6776); }\n.pill-total { border-color: var(--ind-surface-border-strong, #5a6776); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Row of ISA-18.2 priority counters (HH / H / L / LL). Gives an at-a-glance\n * alarm summary for a unit or the whole plant, colored by priority.\n */\n@Component({\n  tag: 'ind-alarm-badge-group',\n  styleUrl: 'alarm-badge-group.css',\n  shadow: true,\n})\nexport class IndAlarmBadgeGroup {\n  /** High-high count. */\n  @Prop() highHigh: number = 0;\n  /** High count. */\n  @Prop() high: number = 0;\n  /** Low count. */\n  @Prop() low: number = 0;\n  /** Low-low count. */\n  @Prop() lowLow: number = 0;\n  /** Hide priorities whose count is zero. */\n  @Prop() hideZero: boolean = false;\n  /** Append a total pill. */\n  @Prop() showTotal: boolean = false;\n\n  private get total(): number {\n    return this.highHigh + this.high + this.low + this.lowLow;\n  }\n\n  render() {\n    const items = [\n      { key: 'high-high', label: 'HH', count: this.highHigh },\n      { key: 'high', label: 'H', count: this.high },\n      { key: 'low', label: 'L', count: this.low },\n      { key: 'low-low', label: 'LL', count: this.lowLow },\n    ].filter((i) => !this.hideZero || i.count > 0);\n\n    return (\n      <Host role=\"group\" aria-label={`${this.total} active alarms`}>\n        {items.map((i) => (\n          <span class={`pill pill-${i.key}`} part=\"pill\" key={i.key}>\n            <span class=\"pill-label\" part=\"pill-label\">{i.label}</span>\n            <span class=\"pill-count\" part=\"pill-count\">{i.count}</span>\n          </span>\n        ))}\n        {this.showTotal && (\n          <span class=\"pill pill-total\" part=\"total\">\n            <span class=\"pill-label\">Σ</span>\n            <span class=\"pill-count\">{this.total}</span>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-alarm-count.cjs.entry.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const alarmCountCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);--_h:18px;--_fs:var(--ind-font-size-xs, 10px)}:host([size="sm"]){--_h:15px;--_fs:9px}:host([size="lg"]){--_h:22px;--_fs:var(--ind-font-size-sm, 11px)}.chip{display:inline-flex;align-items:stretch;height:var(--_h);border-radius:var(--ind-radius-sm, 2px);overflow:hidden;border:1px solid var(--_border, #5a6776);font-size:var(--_fs);font-weight:var(--ind-font-weight-bold, 700);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.prio{display:inline-flex;align-items:center;padding:0 4px;color:var(--_fg, #fff);background:var(--_bg, #5a6776)}.num{display:inline-flex;align-items:center;padding:0 5px;color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));background:var(--ind-surface-sunken, light-dark(#fff, #000))}.chip[data-priority="high-high"]{--_bg:var(--ind-alarm-high-high-bg, #dc2626);--_fg:var(--ind-alarm-high-high-fg, #fff);--_border:var(--ind-alarm-high-high-border, #f87171)}.chip[data-priority="high"]{--_bg:var(--ind-alarm-high-bg, #f59e0b);--_fg:var(--ind-alarm-high-fg, #1a1205);--_border:var(--ind-alarm-high-border, #fcd34d)}.chip[data-priority="low"]{--_bg:var(--ind-alarm-low-bg, #0891b2);--_fg:var(--ind-alarm-low-fg, #fff);--_border:var(--ind-alarm-low-border, #67e8f9)}.chip[data-priority="low-low"]{--_bg:var(--ind-alarm-low-low-bg, #7c3aed);--_fg:var(--ind-alarm-low-low-fg, #fff);--_border:var(--ind-alarm-low-low-border, #c4b5fd)}`;
+
+const IndAlarmCount = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** High-High (priority 1) count. */
+    highHigh = 0;
+    /** High (priority 2) count. */
+    high = 0;
+    /** Low (priority 3) count. */
+    low = 0;
+    /** Low-Low (priority 4) count. */
+    lowLow = 0;
+    /** Hide priority chips whose count is 0. */
+    hideZero = false;
+    /** Size. */
+    size = 'md';
+    chips() {
+        return [
+            { key: 'high-high', label: 'HH', value: this.highHigh },
+            { key: 'high', label: 'H', value: this.high },
+            { key: 'low', label: 'L', value: this.low },
+            { key: 'low-low', label: 'LL', value: this.lowLow },
+        ];
+    }
+    render() {
+        const total = this.highHigh + this.high + this.low + this.lowLow;
+        const chips = this.chips().filter((c) => !this.hideZero || c.value > 0);
+        return (index.h(index.Host, { key: '04c33c5ff65e39d875b499e827fd28cbda31c4c6', role: "status", "aria-label": `${total} active alarms` }, chips.map((c) => (index.h("span", { class: "chip", part: "chip", "data-priority": c.key }, index.h("span", { class: "prio", part: "priority" }, c.label), index.h("span", { class: "num", part: "count" }, c.value))))));
+    }
+};
+IndAlarmCount.style = alarmCountCss();
+
+exports.ind_alarm_count = IndAlarmCount;
+//# sourceMappingURL=ind-alarm-count.entry.cjs.js.map
+
+//# sourceMappingURL=ind-alarm-count.cjs.entry.js.map

package/dist/cjs/ind-alarm-count.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-alarm-count.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,i/CAAi/C,CAAC;;MCSlgD,aAAa,GAAA,MAAA;;;;;IAEhB,QAAQ,GAAW,CAAC;;IAEpB,IAAI,GAAW,CAAC;;IAEhB,GAAG,GAAW,CAAC;;IAEf,MAAM,GAAW,CAAC;;IAED,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAmB,IAAI;IAE5C,KAAK,GAAA;QACX,OAAO;AACL,YAAA,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;AACvD,YAAA,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE;AAC7C,YAAA,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE;AAC3C,YAAA,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;SACpD;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;QAChE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC;QACvE,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAa,GAAG,KAAK,CAAA,cAAA,CAAgB,EAAA,EACrD,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MACXD,kBAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,eAAA,EAAgB,CAAC,CAAC,GAAG,EAAA,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,UAAU,EAAA,EAAE,CAAC,CAAC,KAAK,CAAQ,EACnDA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,CAAC,CAAC,KAAK,CAAQ,CAC1C,CACR,CAAC,CACG;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/alarm-count/alarm-count.css?tag=ind-alarm-count&encapsulation=shadow","src/components/atoms/alarm-count/alarm-count.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  --_h: 18px;\n  --_fs: var(--ind-font-size-xs, 10px);\n}\n\n:host([size=\"sm\"]) { --_h: 15px; --_fs: 9px; }\n:host([size=\"lg\"]) { --_h: 22px; --_fs: var(--ind-font-size-sm, 11px); }\n\n.chip {\n  display: inline-flex;\n  align-items: stretch;\n  height: var(--_h);\n  border-radius: var(--ind-radius-sm, 2px);\n  overflow: hidden;\n  border: 1px solid var(--_border, #5a6776);\n  font-size: var(--_fs);\n  font-weight: var(--ind-font-weight-bold, 700);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.prio {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 4px;\n  color: var(--_fg, #fff);\n  background: var(--_bg, #5a6776);\n}\n\n.num {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 5px;\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  background: var(--ind-surface-sunken, light-dark(#fff, #000));\n}\n\n.chip[data-priority=\"high-high\"] { --_bg: var(--ind-alarm-high-high-bg, #dc2626); --_fg: var(--ind-alarm-high-high-fg, #fff); --_border: var(--ind-alarm-high-high-border, #f87171); }\n.chip[data-priority=\"high\"]      { --_bg: var(--ind-alarm-high-bg, #f59e0b); --_fg: var(--ind-alarm-high-fg, #1a1205); --_border: var(--ind-alarm-high-border, #fcd34d); }\n.chip[data-priority=\"low\"]       { --_bg: var(--ind-alarm-low-bg, #0891b2); --_fg: var(--ind-alarm-low-fg, #fff); --_border: var(--ind-alarm-low-border, #67e8f9); }\n.chip[data-priority=\"low-low\"]   { --_bg: var(--ind-alarm-low-low-bg, #7c3aed); --_fg: var(--ind-alarm-low-low-fg, #fff); --_border: var(--ind-alarm-low-low-border, #c4b5fd); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type AlarmCountSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-alarm-count',\n  styleUrl: 'alarm-count.css',\n  shadow: true,\n})\nexport class IndAlarmCount {\n  /** High-High (priority 1) count. */\n  @Prop() highHigh: number = 0;\n  /** High (priority 2) count. */\n  @Prop() high: number = 0;\n  /** Low (priority 3) count. */\n  @Prop() low: number = 0;\n  /** Low-Low (priority 4) count. */\n  @Prop() lowLow: number = 0;\n  /** Hide priority chips whose count is 0. */\n  @Prop({ reflect: true }) hideZero: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: AlarmCountSize = 'md';\n\n  private chips(): { key: string; label: string; value: number }[] {\n    return [\n      { key: 'high-high', label: 'HH', value: this.highHigh },\n      { key: 'high', label: 'H', value: this.high },\n      { key: 'low', label: 'L', value: this.low },\n      { key: 'low-low', label: 'LL', value: this.lowLow },\n    ];\n  }\n\n  render() {\n    const total = this.highHigh + this.high + this.low + this.lowLow;\n    const chips = this.chips().filter((c) => !this.hideZero || c.value > 0);\n    return (\n      <Host role=\"status\" aria-label={`${total} active alarms`}>\n        {chips.map((c) => (\n          <span class=\"chip\" part=\"chip\" data-priority={c.key}>\n            <span class=\"prio\" part=\"priority\">{c.label}</span>\n            <span class=\"num\" part=\"count\">{c.value}</span>\n          </span>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-alarm-panel.cjs.entry.js

@@ -0,0 +1,51 @@
+'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 alarmPanelCss = () => `:host{min-width:360px}.panel-list{max-height:420px}`;
+
+const PRIORITY_RANK = {
+    'high-high': 0,
+    high: 1,
+    low: 2,
+    'low-low': 3,
+};
+const IndAlarmPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indAck = index.createEvent(this, "indAck");
+        this.indAckAll = index.createEvent(this, "indAckAll");
+    }
+    /** Panel heading. */
+    heading = 'Alarms';
+    /** Alarm rows. */
+    alarms = [];
+    /** Hide already-acknowledged alarms. */
+    hideAcknowledged = false;
+    /** Fires with the alarm id when a single alarm is acknowledged. */
+    indAck;
+    /** Fires when the operator acknowledges all visible alarms. */
+    indAckAll;
+    sorted() {
+        const list = this.hideAcknowledged ? this.alarms.filter((a) => !a.acknowledged) : this.alarms;
+        return [...list].sort((a, b) => {
+            const ack = Number(a.acknowledged ?? false) - Number(b.acknowledged ?? false);
+            if (ack !== 0)
+                return ack;
+            return PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority];
+        });
+    }
+    render() {
+        const rows = this.sorted();
+        const unacked = this.alarms.filter((a) => !a.acknowledged).length;
+        return (index.h(index.Host, { key: '0dfd3cce47c2bb9367fe44374890f64fe8e6cd35' }, index.h("div", { key: '5fb96dd5aba1723905467f0b97df8808cfe60362', class: "panel-head" }, index.h("div", { key: '4df0bf8cb769f781920c69cdd81dcdf0f22721b5', class: "panel-titles" }, index.h("span", { key: '41bd0d8955b5bb89107b5abf350f82cd6b54b160', class: "panel-title", part: "heading" }, this.heading), index.h("span", { key: 'b8143a078e6ac7fca073713f19e44554b72a3b3c', class: "panel-subtitle" }, unacked, " unacknowledged \u00B7 ", this.alarms.length, " total")), index.h("div", { key: '9c660b78dad715003000c61b9ed532e280950193', class: "panel-actions" }, index.h("ind-button", { key: '37ae9d3d64083f360a8292d17e33346c6ae60ee6', variant: "default", size: "sm", label: "ACK all", disabled: unacked === 0, onIndActivate: () => this.indAckAll.emit() }))), index.h("div", { key: '65b366bc7cd87378fa18af0610d9796cbdc6bbfb', class: "panel-list", part: "list" }, rows.length === 0 ? (index.h("div", { class: "panel-empty" }, "No active alarms")) : (rows.map((a) => (index.h("ind-alarm-row", { key: a.id, priority: a.priority, tag: a.tag, message: a.message, time: a.time, acknowledged: a.acknowledged, onIndAck: () => this.indAck.emit(a.id) })))))));
+    }
+};
+IndAlarmPanel.style = panelCss() + alarmPanelCss();
+
+exports.ind_alarm_panel = IndAlarmPanel;
+//# sourceMappingURL=ind-alarm-panel.entry.cjs.js.map
+
+//# sourceMappingURL=ind-alarm-panel.cjs.entry.js.map

package/dist/cjs/ind-alarm-panel.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-alarm-panel.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-alarm-panel&encapsulation=shadow","src/components/organisms/alarm-panel/alarm-panel.css?tag=ind-alarm-panel&encapsulation=shadow","src/components/organisms/alarm-panel/alarm-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: 360px;\n}\n\n.panel-list {\n  max-height: 420px;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { AlarmRowPriority } from '../../molecules/alarm-row/alarm-row';\n\nexport interface AlarmPanelItem {\n  id: string;\n  priority: AlarmRowPriority;\n  tag?: string;\n  message: string;\n  time?: string;\n  acknowledged?: boolean;\n}\n\nconst PRIORITY_RANK: Record<AlarmRowPriority, number> = {\n  'high-high': 0,\n  high: 1,\n  low: 2,\n  'low-low': 3,\n};\n\n/**\n * Active alarm list with a toolbar: shows unacknowledged-first, ISA-18.2\n * sorted `<ind-alarm-row>`s and an \"ACK all\" command. Emits `indAck` (per\n * alarm) and `indAckAll`.\n */\n@Component({\n  tag: 'ind-alarm-panel',\n  styleUrls: ['../_shared/panel.css', 'alarm-panel.css'],\n  shadow: true,\n})\nexport class IndAlarmPanel {\n  /** Panel heading. */\n  @Prop() heading: string = 'Alarms';\n  /** Alarm rows. */\n  @Prop() alarms: AlarmPanelItem[] = [];\n  /** Hide already-acknowledged alarms. */\n  @Prop() hideAcknowledged: boolean = false;\n\n  /** Fires with the alarm id when a single alarm is acknowledged. */\n  @Event() indAck!: EventEmitter<string>;\n  /** Fires when the operator acknowledges all visible alarms. */\n  @Event() indAckAll!: EventEmitter<void>;\n\n  private sorted(): AlarmPanelItem[] {\n    const list = this.hideAcknowledged ? this.alarms.filter((a) => !a.acknowledged) : this.alarms;\n    return [...list].sort((a, b) => {\n      const ack = Number(a.acknowledged ?? false) - Number(b.acknowledged ?? false);\n      if (ack !== 0) return ack;\n      return PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority];\n    });\n  }\n\n  render() {\n    const rows = this.sorted();\n    const unacked = this.alarms.filter((a) => !a.acknowledged).length;\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            <span class=\"panel-subtitle\">{unacked} unacknowledged · {this.alarms.length} total</span>\n          </div>\n          <div class=\"panel-actions\">\n            <ind-button\n              variant=\"default\"\n              size=\"sm\"\n              label=\"ACK all\"\n              disabled={unacked === 0}\n              onIndActivate={() => this.indAckAll.emit()}\n            />\n          </div>\n        </div>\n        <div class=\"panel-list\" part=\"list\">\n          {rows.length === 0 ? (\n            <div class=\"panel-empty\">No active alarms</div>\n          ) : (\n            rows.map((a) => (\n              <ind-alarm-row\n                key={a.id}\n                priority={a.priority}\n                tag={a.tag}\n                message={a.message}\n                time={a.time}\n                acknowledged={a.acknowledged}\n                onIndAck={() => this.indAck.emit(a.id)}\n              />\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-alarm-row.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const rowCss = () => `:host{display:grid;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));border-bottom:1px solid var(--ind-surface-border-subtle);box-sizing:border-box;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.time{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));white-space:nowrap}.tag{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));white-space:nowrap}.msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const alarmRowCss = () => `:host{grid-template-columns:28px auto 1fr auto auto}:host([acknowledged]){opacity:0.6}.prio{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--ind-font-weight-bold, 700);font-size:var(--ind-font-size-xs, 10px);border-radius:var(--ind-radius-sm, 2px);padding:2px 0;color:var(--ind-color-palette-neutral-1000, #fff)}.prio-high-high{background:var(--ind-alarm-high-high-bg, #dc2626)}.prio-high{background:var(--ind-alarm-high-bg, #f59e0b);color:var(--ind-alarm-high-fg, #000)}.prio-low{background:var(--ind-alarm-low-bg, #0891b2)}.prio-low-low{background:var(--ind-alarm-low-low-bg, #7c3aed)}.acked{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-state-running-bg, #16a34a);white-space:nowrap}:host([priority="high-high"]:not([acknowledged])) .prio{animation:ind-alarm-row-pulse var(--ind-motion-blink-slow, 1000ms) ease-in-out infinite}@keyframes ind-alarm-row-pulse{50%{opacity:0.45}}@media (prefers-reduced-motion: reduce){:host([priority="high-high"]:not([acknowledged])) .prio{animation:none}}`;
+
+const PRIORITY_LABEL = {
+    'high-high': 'HH',
+    high: 'H',
+    low: 'L',
+    'low-low': 'LL',
+};
+const IndAlarmRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indAck = index.createEvent(this, "indAck");
+    }
+    /** Alarm priority. */
+    priority = 'high';
+    /** Source tag (e.g. "PT-101"). */
+    tag;
+    /** Alarm message. */
+    message;
+    /** Pre-formatted timestamp string. */
+    time;
+    /** Acknowledged state — dims the row and hides the ack button. */
+    acknowledged = false;
+    /** Fires when the operator acknowledges this alarm. */
+    indAck;
+    render() {
+        return (index.h(index.Host, { key: 'c361a5cc2d2d1839f81d90a883af3a9ec53085cb', role: "row", "aria-label": `${PRIORITY_LABEL[this.priority]} alarm ${this.tag ?? ''} ${this.message}`, "aria-live": this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite' }, index.h("span", { key: '6471d9f6b21a764ba85d89f371e6a3d6fccb60de', class: `prio prio-${this.priority}`, part: "priority" }, PRIORITY_LABEL[this.priority]), this.tag && index.h("span", { key: '907433595d8628dacf0815d18556920efe617dd2', class: "tag", part: "tag" }, this.tag), index.h("span", { key: '971b318c306e65089ac3687fcbdde2f98b6708b7', class: "msg", part: "message" }, this.message), this.time && index.h("span", { key: '3ccae3c4fff8f219320899a8d635b672f145aa40', class: "time", part: "time" }, this.time), !this.acknowledged ? (index.h("ind-button", { class: "ack", part: "ack", variant: "ghost", size: "sm", label: "ACK", onIndActivate: () => this.indAck.emit() })) : (index.h("span", { class: "acked", part: "acked" }, "ACK \u2713"))));
+    }
+};
+IndAlarmRow.style = rowCss() + alarmRowCss();
+
+exports.ind_alarm_row = IndAlarmRow;
+//# sourceMappingURL=ind-alarm-row.entry.cjs.js.map
+
+//# sourceMappingURL=ind-alarm-row.cjs.entry.js.map

package/dist/cjs/ind-alarm-row.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-alarm-row.cjs.entry.js","mappings":";;;;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,iyBAAiyB,CAAC;;ACAxzB,MAAM,WAAW,GAAG,MAAM,CAAC,wgCAAwgC,CAAC;;ACIpiC,MAAM,cAAc,GAAqC;AACvD,IAAA,WAAW,EAAE,IAAI;AACjB,IAAA,IAAI,EAAE,GAAG;AACT,IAAA,GAAG,EAAE,GAAG;AACR,IAAA,SAAS,EAAE,IAAI;CAChB;MAWY,WAAW,GAAA,MAAA;;;;;;IAEG,QAAQ,GAAqB,MAAM;;AAEpD,IAAA,GAAG;;AAEH,IAAA,OAAO;;AAEP,IAAA,IAAI;;IAEa,YAAY,GAAY,KAAK;;AAG7C,IAAA,MAAM;IAEf,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,KAAK,gBACE,CAAA,EAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA,OAAA,EAAU,IAAI,CAAC,GAAG,IAAI,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA,CAAE,EAAA,WAAA,EAC3E,IAAI,CAAC,QAAQ,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,QAAQ,EAAA,EAEvFD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,UAAU,IAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAQ,EAChG,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC3DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EACrD,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EAC9D,CAAC,IAAI,CAAC,YAAY,IACjBA,OAAA,CAAA,YAAA,EAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,KAAK,EACX,aAAa,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAA,CACvC,KAEFA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAA,YAAA,CAAa,CAC9C,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/row.css?tag=ind-alarm-row&encapsulation=shadow","src/components/molecules/alarm-row/alarm-row.css?tag=ind-alarm-row&encapsulation=shadow","src/components/molecules/alarm-row/alarm-row.tsx"],"sourcesContent":["/* Shared chrome for log-style molecule rows (alarm, event, audit, historical).\n * Each component sets its own grid-template-columns. */\n:host {\n  display: grid;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-base, 12px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  box-sizing: border-box;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.time {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  white-space: nowrap;\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  white-space: nowrap;\n}\n\n.msg {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n",":host {\n  grid-template-columns: 28px auto 1fr auto auto;\n}\n\n:host([acknowledged]) {\n  opacity: 0.6;\n}\n\n.prio {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: var(--ind-font-weight-bold, 700);\n  font-size: var(--ind-font-size-xs, 10px);\n  border-radius: var(--ind-radius-sm, 2px);\n  padding: 2px 0;\n  color: var(--ind-color-palette-neutral-1000, #fff);\n}\n\n.prio-high-high { background: var(--ind-alarm-high-high-bg, #dc2626); }\n.prio-high { background: var(--ind-alarm-high-bg, #f59e0b); color: var(--ind-alarm-high-fg, #000); }\n.prio-low { background: var(--ind-alarm-low-bg, #0891b2); }\n.prio-low-low { background: var(--ind-alarm-low-low-bg, #7c3aed); }\n\n.acked {\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-state-running-bg, #16a34a);\n  white-space: nowrap;\n}\n\n/* Unacknowledged high-high pulses to draw the eye. */\n:host([priority=\"high-high\"]:not([acknowledged])) .prio {\n  animation: ind-alarm-row-pulse var(--ind-motion-blink-slow, 1000ms) ease-in-out infinite;\n}\n\n@keyframes ind-alarm-row-pulse {\n  50% { opacity: 0.45; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([priority=\"high-high\"]:not([acknowledged])) .prio { animation: none; }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type AlarmRowPriority = 'high-high' | 'high' | 'low' | 'low-low';\n\nconst PRIORITY_LABEL: Record<AlarmRowPriority, string> = {\n  'high-high': 'HH',\n  high: 'H',\n  low: 'L',\n  'low-low': 'LL',\n};\n\n/**\n * One line in an alarm summary / list. Shows the ISA-18.2 priority, the tag,\n * the message, a timestamp and an acknowledge button. Emits `indAck`.\n */\n@Component({\n  tag: 'ind-alarm-row',\n  styleUrls: ['../_shared/row.css', 'alarm-row.css'],\n  shadow: true,\n})\nexport class IndAlarmRow {\n  /** Alarm priority. */\n  @Prop({ reflect: true }) priority: AlarmRowPriority = 'high';\n  /** Source tag (e.g. \"PT-101\"). */\n  @Prop() tag?: string;\n  /** Alarm message. */\n  @Prop() message!: string;\n  /** Pre-formatted timestamp string. */\n  @Prop() time?: string;\n  /** Acknowledged state — dims the row and hides the ack button. */\n  @Prop({ reflect: true }) acknowledged: boolean = false;\n\n  /** Fires when the operator acknowledges this alarm. */\n  @Event() indAck!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        role=\"row\"\n        aria-label={`${PRIORITY_LABEL[this.priority]} alarm ${this.tag ?? ''} ${this.message}`}\n        aria-live={this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite'}\n      >\n        <span class={`prio prio-${this.priority}`} part=\"priority\">{PRIORITY_LABEL[this.priority]}</span>\n        {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n        <span class=\"msg\" part=\"message\">{this.message}</span>\n        {this.time && <span class=\"time\" part=\"time\">{this.time}</span>}\n        {!this.acknowledged ? (\n          <ind-button\n            class=\"ack\"\n            part=\"ack\"\n            variant=\"ghost\"\n            size=\"sm\"\n            label=\"ACK\"\n            onIndActivate={() => this.indAck.emit()}\n          />\n        ) : (\n          <span class=\"acked\" part=\"acked\">ACK ✓</span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-alarm-summary.cjs.entry.js

@@ -0,0 +1,32 @@
+'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 alarmSummaryCss = () => `:host{min-width:220px}.figures{display:flex;gap:var(--ind-spacing-7, 20px)}.figure{display:flex;flex-direction:column}.figure-value{font-size:var(--ind-font-size-3xl, 28px);font-weight:var(--ind-font-weight-bold, 700);line-height:1}.figure-label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted)}.figure-alert .figure-value{color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const IndAlarmSummary = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Alarm summary';
+    highHigh = 0;
+    high = 0;
+    low = 0;
+    lowLow = 0;
+    /** Number still requiring acknowledgement. */
+    unacknowledged = 0;
+    get total() {
+        return this.highHigh + this.high + this.low + this.lowLow;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c5992c482be7f6a3ba7a60895206a99b66b0b170' }, index.h("div", { key: '99469823afd889f6f1a80df3cf08130fccc00147', class: "panel-head" }, index.h("span", { key: 'b2e722e717ce05485f7dbf295295e183f7b2303f', class: "panel-title", part: "heading" }, this.heading)), index.h("div", { key: 'c247452858019863759a9de52c0ba64eadb19e0e', class: "panel-body" }, index.h("div", { key: '03aee42078dd1ff605a427f81b25f54801af740c', class: "figures", part: "figures" }, index.h("div", { key: '4d432a006fc1ff02eb5a9fef06a4699f2e4ac354', class: "figure" }, index.h("span", { key: 'd44e91c6aedd0ffb1753786ea14d913e63dff493', class: "figure-value", part: "total" }, this.total), index.h("span", { key: 'bba93e5f7341eff4432a092647b2ded64ec9d0d8', class: "figure-label" }, "Active")), index.h("div", { key: '0ba8ec3802ce0a710b7af437e7520bff89f3dce9', class: `figure ${this.unacknowledged > 0 ? 'figure-alert' : ''}` }, index.h("span", { key: '18e126c37406b250b87c598f83bccaaf8c443034', class: "figure-value", part: "unacked" }, this.unacknowledged), index.h("span", { key: '6bcb83b6a06add5d0905411cc308d17e200944a3', class: "figure-label" }, "Unacked"))), index.h("ind-alarm-badge-group", { key: 'aaad73d149fcf1e861fa95a6199806b8046cd897', part: "badges", highHigh: this.highHigh, high: this.high, low: this.low, lowLow: this.lowLow }))));
+    }
+};
+IndAlarmSummary.style = panelCss() + alarmSummaryCss();
+
+exports.ind_alarm_summary = IndAlarmSummary;
+//# sourceMappingURL=ind-alarm-summary.entry.cjs.js.map
+
+//# sourceMappingURL=ind-alarm-summary.cjs.entry.js.map

package/dist/cjs/ind-alarm-summary.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-alarm-summary.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,eAAe,GAAG,MAAM,CAAC,sbAAsb,CAAC;;MCYzc,eAAe,GAAA,MAAA;;;;IAClB,OAAO,GAAW,eAAe;IACjC,QAAQ,GAAW,CAAC;IACpB,IAAI,GAAW,CAAC;IAChB,GAAG,GAAW,CAAC;IACf,MAAM,GAAW,CAAC;;IAElB,cAAc,GAAW,CAAC;AAElC,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;;IAG3D,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,CAC1D,EACNA,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,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAA,EACjBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EAC3DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,EAAA,QAAA,CAAc,CACpC,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,cAAc,GAAG,EAAE,CAAA,CAAE,EAAA,EACnEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,cAAc,CAAQ,EACtEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,cAAc,EAAA,EAAA,SAAA,CAAe,CACrC,CACF,EACNA,OAAA,CAAA,uBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,CACnB,CACE,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-alarm-summary&encapsulation=shadow","src/components/organisms/alarm-summary/alarm-summary.css?tag=ind-alarm-summary&encapsulation=shadow","src/components/organisms/alarm-summary/alarm-summary.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: 220px;\n}\n\n.figures {\n  display: flex;\n  gap: var(--ind-spacing-7, 20px);\n}\n\n.figure {\n  display: flex;\n  flex-direction: column;\n}\n\n.figure-value {\n  font-size: var(--ind-font-size-3xl, 28px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  line-height: 1;\n}\n\n.figure-label {\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);\n}\n\n.figure-alert .figure-value {\n  color: var(--ind-state-fault-bg, #dc2626);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Compact alarm KPI block: total + unacknowledged headline figures and the\n * ISA-18.2 priority breakdown via `<ind-alarm-badge-group>`. For a dashboard\n * tile or the top of an alarm page.\n */\n@Component({\n  tag: 'ind-alarm-summary',\n  styleUrls: ['../_shared/panel.css', 'alarm-summary.css'],\n  shadow: true,\n})\nexport class IndAlarmSummary {\n  @Prop() heading: string = 'Alarm summary';\n  @Prop() highHigh: number = 0;\n  @Prop() high: number = 0;\n  @Prop() low: number = 0;\n  @Prop() lowLow: number = 0;\n  /** Number still requiring acknowledgement. */\n  @Prop() unacknowledged: number = 0;\n\n  private get total(): number {\n    return this.highHigh + this.high + this.low + this.lowLow;\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>\n        <div class=\"panel-body\">\n          <div class=\"figures\" part=\"figures\">\n            <div class=\"figure\">\n              <span class=\"figure-value\" part=\"total\">{this.total}</span>\n              <span class=\"figure-label\">Active</span>\n            </div>\n            <div class={`figure ${this.unacknowledged > 0 ? 'figure-alert' : ''}`}>\n              <span class=\"figure-value\" part=\"unacked\">{this.unacknowledged}</span>\n              <span class=\"figure-label\">Unacked</span>\n            </div>\n          </div>\n          <ind-alarm-badge-group\n            part=\"badges\"\n            highHigh={this.highHigh}\n            high={this.high}\n            low={this.low}\n            lowLow={this.lowLow}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 
 const alarmCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);border:1px solid;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);max-width:100%}.badge{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-bold, 700);font-size:var(--ind-font-size-sm, 11px);letter-spacing:0.04em;padding:1px var(--ind-spacing-2, 4px);border-radius:var(--ind-radius-sm, 2px);background:rgba(0, 0, 0, 0.25);white-space:nowrap}.label{flex:1;font-weight:var(--ind-font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timestamp{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);opacity:0.85;white-space:nowrap}:host([priority="high-high"]){background:var(--ind-alarm-high-high-bg, #dc2626);color:var(--ind-alarm-high-high-fg, #ffffff);border-color:var(--ind-alarm-high-high-border, #f87171)}:host([priority="high"]){background:var(--ind-alarm-high-bg, #f59e0b);color:var(--ind-alarm-high-fg, #000000);border-color:var(--ind-alarm-high-border, #fcd34d)}:host([priority="low"]){background:var(--ind-alarm-low-bg, #0891b2);color:var(--ind-alarm-low-fg, #ffffff);border-color:var(--ind-alarm-low-border, #22d3ee)}:host([priority="low-low"]){background:var(--ind-alarm-low-low-bg, #7c3aed);color:var(--ind-alarm-low-low-fg, #ffffff);border-color:var(--ind-alarm-low-low-border, #a78bfa)}:host(:not([acknowledged])){animation:ind-alarm-blink var(--ind-motion-blink-fast, 400ms) steps(2, end) infinite}:host([priority="high-high"]:not([acknowledged])){animation-duration:var(--ind-motion-blink-urgent, 200ms)}:host([priority="low"]:not([acknowledged])),:host([priority="low-low"]:not([acknowledged])){animation-duration:var(--ind-motion-blink-slow, 1000ms)}:host([acknowledged]) .label{opacity:0.75}:host([acknowledged]) .badge{opacity:0.85}@keyframes ind-alarm-blink{50%{filter:brightness(0.6)}}@media (prefers-reduced-motion: reduce){:host(:not([acknowledged])){animation:none;outline:3px solid currentColor;outline-offset:2px}}`;
 

package/dist/cjs/ind-app-header.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 
 const appHeaderCss = () => `:host{display:flex;align-items:center;gap:var(--ind-spacing-6, 16px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-6, 16px);background:var(--ind-surface-panel);border-bottom:1px solid var(--ind-surface-border-default);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-sans);min-height:56px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.brand{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.brand-logo{font-size:26px;line-height:1;color:var(--ind-button-primary-bg)}.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-name{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-bold, 700);letter-spacing:0.05em;text-transform:uppercase}.brand-sub{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));text-transform:uppercase;letter-spacing:0.08em}.machine{display:flex;flex-direction:column;line-height:1.1;padding-left:var(--ind-spacing-5, 12px);border-left:1px solid var(--ind-surface-border-subtle)}.machine-label{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));text-transform:uppercase;letter-spacing:0.08em}.machine-id{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600)}.mqtt{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.mqtt-label{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.spacer{flex:1}.meta{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);font-size:var(--ind-font-size-sm, 11px)}.version{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.docs{color:var(--ind-feedback-info-bg);text-decoration:underline;text-underline-offset:2px}.docs:hover{text-decoration-thickness:2px}.actions{display:flex;gap:var(--ind-spacing-3, 6px)}.action{height:var(--ind-size-button-sm, 26px);padding:0 var(--ind-spacing-4, 8px);background:var(--ind-button-default-bg);color:var(--ind-button-default-fg);border:1px solid var(--ind-button-default-border);border-radius:var(--ind-radius-md, 3px);font-family:inherit;font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-semibold, 600);cursor:pointer;transition:background var(--ind-motion-duration-fast, 120ms)}.action:hover{background:var(--ind-button-default-bg-hover)}.action--danger{background:transparent;color:var(--ind-feedback-error-bg);border-color:var(--ind-feedback-error-border)}.action--danger:hover{background:var(--ind-feedback-error-bg);color:var(--ind-feedback-error-fg)}`;
 
@@ -31,7 +31,7 @@ const IndAppHeader = class {
     indChangeMachine;
     indDisconnect;
     render() {
-        return (index.h(index.Host, { key: 'c65d79c697786cf1e17f3d13a1f5475da46e66ac', role: "banner" }, index.h("div", { key: '4c17ab40581251748f4bfbdceb8553d736b9288b', class: "brand", part: "brand" }, index.h("slot", { key: '2e4a11be914770ce6cf3b2e2a4cf7e92fbd95702', name: "logo" }, index.h("span", { key: 'ff2a98d37c5153a9169b188a2e77d24f49a505e5', class: "brand-logo", "aria-hidden": "true" }, "\u2B22")), index.h("div", { key: 'a679a938ab050aa8e2c326a88e905563134fbbc5', class: "brand-text" }, index.h("span", { key: '19b941fba9c4d7dbbda39242f3c6afb543c5ef6a', class: "brand-name" }, this.brand), this.subBrand && index.h("span", { key: 'd77217db67b0384df179638cbf98ae38697a7071', class: "brand-sub" }, this.subBrand))), this.machineId && (index.h("div", { key: '1e40da6c490185efe7423b1b82d5a5e56cd4cb9a', class: "machine", part: "machine" }, index.h("span", { key: '5ca76acc4d270e8f6adc12d0077f1371e136aded', class: "machine-label" }, "Machine"), index.h("span", { key: 'a10840b72441bb7adabd0f152332bfa9e081eff5', class: "machine-id" }, this.machineId))), index.h("div", { key: '5cfbdeb0e191cdbfa679fd0a1e205c4544065b10', class: "mqtt", part: "mqtt" }, index.h("ind-status-dot", { key: 'b80758c2a80a27b362651cd1251c92d3b510212e', state: this.mqttState, size: "md" }), this.mqttLabel && index.h("span", { key: 'a443524b51f9950e068bc815bc4e89f52bc9c296', class: "mqtt-label" }, this.mqttLabel)), index.h("span", { key: '84028540ba07e5f4b400e9694a2c102c0ffcb618', class: "spacer" }), index.h("div", { key: '42e07d1726547c318367423708e9fd7078a771ed', class: "meta", part: "meta" }, this.version && index.h("span", { key: '9fc02e0f44f50126554fa70e127bf5e1819b09ee', class: "version" }, this.version), this.docsUrl && (index.h("a", { key: '3839f6149b334591551124f4bb5eb296d0f4a296', class: "docs", href: this.docsUrl, target: "_blank", rel: "noopener noreferrer" }, "Documentation"))), index.h("div", { key: '4265851f62d3f66518a9e07b32933974a301376b', class: "actions", part: "actions" }, index.h("slot", { key: 'dffb5909cf929b3c04e47d598e746a6caf8d55f5', name: "actions" }, !this.hideChangeMachine && (index.h("button", { key: '824c0c0b5419753e50d8ba002dee057ba2ec2b46', type: "button", class: "action", onClick: () => this.indChangeMachine.emit() }, "Change machine")), !this.hideDisconnect && (index.h("button", { key: '5269a1bed2754ca7f7bfd83f0f431cae2d4c1bf5', type: "button", class: "action action--danger", onClick: () => this.indDisconnect.emit() }, "Disconnect"))))));
+        return (index.h(index.Host, { key: '33a1b8dac7bd4feab37a77bf79032897b0bbe4a1', role: "banner" }, index.h("div", { key: 'e21411d4c6f29102909f56322e6a58b59c2ad248', class: "brand", part: "brand" }, index.h("slot", { key: '44c3459a36950ad2a3694a2d29d27975c1de8e7f', name: "logo" }, index.h("span", { key: 'bb0939402521c478da8f0ecd551b7db3ccf765ec', class: "brand-logo", "aria-hidden": "true" }, "\u2B22")), index.h("div", { key: '85b3c26d915ea4e0e572edfc0893e9c79bb2c4ee', class: "brand-text" }, index.h("span", { key: '016479b1ce9a6337112f88bd0058641874f41d39', class: "brand-name" }, this.brand), this.subBrand && index.h("span", { key: 'ece4c7a28e13aaa10a78f9ce4b44487eeaf7cd42', class: "brand-sub" }, this.subBrand))), this.machineId && (index.h("div", { key: 'f9d16ec7b7b753ea6c5e61b960cf541234bf6004', class: "machine", part: "machine" }, index.h("span", { key: '43585929ef3a8b0354f5dbac37337d0eff783a47', class: "machine-label" }, "Machine"), index.h("span", { key: 'cc0643c35bf18d6b5f94cb54e0ef1581c5c1c40e', class: "machine-id" }, this.machineId))), index.h("div", { key: '05c18fe1c2156e319e6b0dfc84a6f81195a39f43', class: "mqtt", part: "mqtt" }, index.h("ind-status-dot", { key: 'a996efe70d20d6b4e959bd561ea0b630041ea1d5', state: this.mqttState, size: "md" }), this.mqttLabel && index.h("span", { key: '581bbb1e39b55a6dd62ba5934889c9081f315933', class: "mqtt-label" }, this.mqttLabel)), index.h("span", { key: '0d1b3d6cae7d50d0a53d7faa7c355b9ae448a4c6', class: "spacer" }), index.h("div", { key: 'd07097da54bb7c4131794b7968fe2dc636a33155', class: "meta", part: "meta" }, this.version && index.h("span", { key: '54b37c493d4560788c3b21f6b9578f8e4fb07060', class: "version" }, this.version), this.docsUrl && (index.h("a", { key: 'b910f3b11e15f53c88476220cef17570c252c98a', class: "docs", href: this.docsUrl, target: "_blank", rel: "noopener noreferrer" }, "Documentation"))), index.h("div", { key: 'b014dfd65ae0b40838b2f8ca028121f6a5def777', class: "actions", part: "actions" }, index.h("slot", { key: '692d5aaeff691d0b4e276d725514b9ae77b421a6', name: "actions" }, !this.hideChangeMachine && (index.h("button", { key: 'f814337835093319db4fd627f91b24eac116e1cc', type: "button", class: "action", onClick: () => this.indChangeMachine.emit() }, "Change machine")), !this.hideDisconnect && (index.h("button", { key: 'f6a03e8bd9f1972f65e805e92a8259ff6a61217c', type: "button", class: "action action--danger", onClick: () => this.indDisconnect.emit() }, "Disconnect"))))));
     }
 };
 IndAppHeader.style = appHeaderCss();

package/dist/cjs/ind-asset-overview.cjs.entry.js

@@ -0,0 +1,33 @@
+'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 assetOverviewCss = () => `:host{min-width:480px}.panel-list{max-height:440px}.row{display:grid;grid-template-columns:12px 88px 1fr 120px auto;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);font-size:var(--ind-font-size-base, 12px)}.tag{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-secondary)}.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted);white-space:nowrap}`;
+
+const IndAssetOverview = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Assets';
+    assets = [];
+    healthVariant(h) {
+        if (h === undefined)
+            return 'default';
+        if (h < 40)
+            return 'error';
+        if (h < 70)
+            return 'warning';
+        return 'success';
+    }
+    render() {
+        return (index.h(index.Host, { key: '2940434a68bef715cfc3629eb509ff9509d3fbf5' }, index.h("div", { key: '0eb751f4a281626ed4f7a8eab06f8069f39508a1', class: "panel-head" }, index.h("span", { key: '275ae9a642cc9f8dee88fa7fdcf8919b59e0641d', class: "panel-title", part: "heading" }, this.heading), index.h("span", { key: 'b359e1e0f2213d4c80f53d856cdb49ccc4bbba9e', class: "panel-subtitle" }, this.assets.length, " assets")), index.h("div", { key: 'caa13830b3c719859aa59631303a9a0e31685d8b', class: "panel-list", part: "list" }, this.assets.length === 0 ? (index.h("div", { class: "panel-empty" }, "No assets")) : (this.assets.map((a) => (index.h("div", { class: "row", part: "row", key: a.tag }, index.h("ind-status-dot", { state: (a.state === 'unknown' ? 'neutral' : a.state), size: "sm" }), index.h("span", { class: "tag", part: "tag" }, a.tag), index.h("span", { class: "name", part: "name" }, a.name), a.health !== undefined && (index.h("ind-progress", { class: "health", value: a.health, max: 100, variant: this.healthVariant(a.health), size: "sm" })), a.detail && index.h("span", { class: "detail", part: "detail" }, a.detail))))))));
+    }
+};
+IndAssetOverview.style = panelCss() + assetOverviewCss();
+
+exports.ind_asset_overview = IndAssetOverview;
+//# sourceMappingURL=ind-asset-overview.entry.cjs.js.map
+
+//# sourceMappingURL=ind-asset-overview.cjs.entry.js.map

package/dist/cjs/ind-asset-overview.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-asset-overview.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,gBAAgB,GAAG,MAAM,CAAC,ikBAAikB,CAAC;;MCqBrlB,gBAAgB,GAAA,MAAA;;;;IACnB,OAAO,GAAW,QAAQ;IAC1B,MAAM,GAAgB,EAAE;AAExB,IAAA,aAAa,CAAC,CAAU,EAAA;QAC9B,IAAI,CAAC,KAAK,SAAS;AAAE,YAAA,OAAO,SAAS;QACrC,IAAI,CAAC,GAAG,EAAE;AAAE,YAAA,OAAO,OAAO;QAC1B,IAAI,CAAC,GAAG,EAAE;AAAE,YAAA,OAAO,SAAS;AAC5B,QAAA,OAAO,SAAS;;IAGlB,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,EAC9DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAe,CAC3D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EAChC,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IACvBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EAAA,WAAA,CAAgB,KAExC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,MAChBA,iBAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAE,CAAC,CAAC,GAAG,EAAA,EACpCA,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,EACzFA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,CAAC,CAAC,GAAG,CAAQ,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,CAAC,CAAC,IAAI,CAAQ,EAC7C,CAAC,CAAC,MAAM,KAAK,SAAS,KACrBA,OAAA,CAAA,cAAA,EAAA,EAAc,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,EAAC,IAAI,GAAgB,CACzH,EACA,CAAC,CAAC,MAAM,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,CAAC,CAAC,MAAM,CAAQ,CAC7D,CACP,CAAC,CACH,CACG,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-asset-overview&encapsulation=shadow","src/components/organisms/asset-overview/asset-overview.css?tag=ind-asset-overview&encapsulation=shadow","src/components/organisms/asset-overview/asset-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: 480px;\n}\n\n.panel-list {\n  max-height: 440px;\n}\n\n.row {\n  display: grid;\n  grid-template-columns: 12px 88px 1fr 120px auto;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  font-size: var(--ind-font-size-base, 12px);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  color: var(--ind-surface-text-secondary);\n}\n\n.name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted);\n  white-space: nowrap;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentCardState } from '../../molecules/equipment-status-card/equipment-status-card';\n\nexport interface AssetItem {\n  tag: string;\n  name: string;\n  state: EquipmentCardState;\n  /** Health score 0–100. */\n  health?: number;\n  detail?: string;\n}\n\n/**\n * Tabular overview of plant assets with state dot, health bar and detail.\n * Suits an asset register or a fleet health page.\n */\n@Component({\n  tag: 'ind-asset-overview',\n  styleUrls: ['../_shared/panel.css', 'asset-overview.css'],\n  shadow: true,\n})\nexport class IndAssetOverview {\n  @Prop() heading: string = 'Assets';\n  @Prop() assets: AssetItem[] = [];\n\n  private healthVariant(h?: number): 'default' | 'success' | 'warning' | 'error' {\n    if (h === undefined) return 'default';\n    if (h < 40) return 'error';\n    if (h < 70) return 'warning';\n    return 'success';\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n          <span class=\"panel-subtitle\">{this.assets.length} assets</span>\n        </div>\n        <div class=\"panel-list\" part=\"list\">\n          {this.assets.length === 0 ? (\n            <div class=\"panel-empty\">No assets</div>\n          ) : (\n            this.assets.map((a) => (\n              <div class=\"row\" part=\"row\" key={a.tag}>\n                <ind-status-dot state={(a.state === 'unknown' ? 'neutral' : a.state) as any} size=\"sm\" />\n                <span class=\"tag\" part=\"tag\">{a.tag}</span>\n                <span class=\"name\" part=\"name\">{a.name}</span>\n                {a.health !== undefined && (\n                  <ind-progress class=\"health\" value={a.health} max={100} variant={this.healthVariant(a.health)} size=\"sm\"></ind-progress>\n                )}\n                {a.detail && <span class=\"detail\" part=\"detail\">{a.detail}</span>}\n              </div>\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-audit-row.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const rowCss = () => `:host{display:grid;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));border-bottom:1px solid var(--ind-surface-border-subtle);box-sizing:border-box;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.time{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));white-space:nowrap}.tag{font-family:var(--ind-font-family-mono);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));white-space:nowrap}.msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const auditRowCss = () => `:host{grid-template-columns:auto auto auto 1fr}.user{font-weight:var(--ind-font-weight-semibold, 600);white-space:nowrap}.action{color:var(--ind-surface-text-secondary);white-space:nowrap}.detail{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted)}`;
+
+const IndAuditRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Pre-formatted timestamp. */
+    time;
+    /** Operator / account that performed the action. */
+    user;
+    /** Action performed (e.g. "Setpoint change"). */
+    action;
+    /** Detail / before→after (e.g. "PIC-101: 3.2 → 4.0 bar"). */
+    detail;
+    render() {
+        return (index.h(index.Host, { key: '356b5a563a71a434a20861f89bb4432226a01f75', role: "row", "aria-label": `${this.user} ${this.action}` }, this.time && index.h("span", { key: '980265f527805524e74f0e6ab9860666c748140d', class: "time", part: "time" }, this.time), index.h("span", { key: '9ebb03e648474ea6f2dd85f3fd6985b54b226e29', class: "user", part: "user" }, this.user), index.h("span", { key: '081a06916ecf269bc6d4615fe41d5206bb2d89ac', class: "action", part: "action" }, this.action), this.detail && index.h("span", { key: '1418ee8d918d9d368847c6f0f0e046bc4d90f6e5', class: "msg detail", part: "detail" }, this.detail)));
+    }
+};
+IndAuditRow.style = rowCss() + auditRowCss();
+
+exports.ind_audit_row = IndAuditRow;
+//# sourceMappingURL=ind-audit-row.entry.cjs.js.map
+
+//# sourceMappingURL=ind-audit-row.cjs.entry.js.map

package/dist/cjs/ind-audit-row.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-audit-row.cjs.entry.js","mappings":";;;;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,iyBAAiyB,CAAC;;ACAxzB,MAAM,WAAW,GAAG,MAAM,CAAC,wTAAwT,CAAC;;MCWvU,WAAW,GAAA,MAAA;;;;;AAEd,IAAA,IAAI;;AAEJ,IAAA,IAAI;;AAEJ,IAAA,MAAM;;AAEN,IAAA,MAAM;IAEd,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,MAAM,CAAA,CAAE,EAAA,EACvD,IAAI,CAAC,IAAI,IAAID,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EAC/DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,EACtD,IAAI,CAAC,MAAM,IAAIA,mEAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtE;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/row.css?tag=ind-audit-row&encapsulation=shadow","src/components/molecules/audit-row/audit-row.css?tag=ind-audit-row&encapsulation=shadow","src/components/molecules/audit-row/audit-row.tsx"],"sourcesContent":["/* Shared chrome for log-style molecule rows (alarm, event, audit, historical).\n * Each component sets its own grid-template-columns. */\n:host {\n  display: grid;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-base, 12px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  box-sizing: border-box;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.time {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n  white-space: nowrap;\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  white-space: nowrap;\n}\n\n.msg {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n",":host {\n  grid-template-columns: auto auto auto 1fr;\n}\n\n.user {\n  font-weight: var(--ind-font-weight-semibold, 600);\n  white-space: nowrap;\n}\n\n.action {\n  color: var(--ind-surface-text-secondary);\n  white-space: nowrap;\n}\n\n.detail {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * One line in an audit trail (21 CFR Part 11 style): timestamp, user, action\n * and an optional before/after detail. Read-only.\n */\n@Component({\n  tag: 'ind-audit-row',\n  styleUrls: ['../_shared/row.css', 'audit-row.css'],\n  shadow: true,\n})\nexport class IndAuditRow {\n  /** Pre-formatted timestamp. */\n  @Prop() time?: string;\n  /** Operator / account that performed the action. */\n  @Prop() user!: string;\n  /** Action performed (e.g. \"Setpoint change\"). */\n  @Prop() action!: string;\n  /** Detail / before→after (e.g. \"PIC-101: 3.2 → 4.0 bar\"). */\n  @Prop() detail?: string;\n\n  render() {\n    return (\n      <Host role=\"row\" aria-label={`${this.user} ${this.action}`}>\n        {this.time && <span class=\"time\" part=\"time\">{this.time}</span>}\n        <span class=\"user\" part=\"user\">{this.user}</span>\n        <span class=\"action\" part=\"action\">{this.action}</span>\n        {this.detail && <span class=\"msg detail\" part=\"detail\">{this.detail}</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const badgeCss = () => `:host{display:inline-flex;--_bg:var(--ind-surface-raised, #1b222c);--_fg:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_border:var(--ind-surface-border-default, #2a3340)}.badge{display:inline-flex;align-items:center;gap:var(--ind-spacing-2, 4px);padding:1px var(--ind-spacing-3, 6px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-semibold, 600);line-height:var(--ind-font-line-height-tight, 1.1);letter-spacing:0.02em;text-transform:uppercase;white-space:nowrap;color:var(--_fg);background:var(--_bg);border:1px solid var(--_border);border-radius:var(--ind-radius-full, 9999px);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}:host([size="md"]) .badge{font-size:var(--ind-font-size-xs, 10px);padding:2px var(--ind-spacing-3, 6px)}:host([size="sm"]) .badge{font-size:9px;padding:0 var(--ind-spacing-2, 4px)}:host([variant="running"]),:host([variant="success"]){--_bg:var(--ind-state-running-bg, #16a34a);--_fg:var(--ind-state-running-fg, #fff);--_border:var(--ind-state-running-border, #4ade80)}:host([variant="stopped"]){--_bg:var(--ind-state-stopped-bg, #5a6776);--_fg:var(--ind-state-stopped-fg, #fff);--_border:var(--ind-state-stopped-border, #8390a0)}:host([variant="fault"]),:host([variant="error"]){--_bg:var(--ind-state-fault-bg, #dc2626);--_fg:var(--ind-state-fault-fg, #fff);--_border:var(--ind-state-fault-border, #f87171)}:host([variant="warning"]){--_bg:var(--ind-state-warning-bg, #f59e0b);--_fg:var(--ind-state-warning-fg, #1a1205);--_border:var(--ind-state-warning-border, #fcd34d)}:host([variant="maintenance"]){--_bg:var(--ind-state-maintenance-bg, #2563eb);--_fg:var(--ind-state-maintenance-fg, #fff);--_border:var(--ind-state-maintenance-border, #60a5fa)}:host([variant="info"]){--_bg:var(--ind-feedback-info-bg, #0891b2);--_fg:var(--ind-feedback-info-fg, #fff);--_border:var(--ind-feedback-info-border, #67e8f9)}:host([outline]) .badge{background:transparent;color:var(--_border)}`;
+
+const IndBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Semantic color. Maps to state / feedback tokens. */
+    variant = 'neutral';
+    /** Size. */
+    size = 'md';
+    /** Outlined instead of filled. */
+    outline = false;
+    render() {
+        return (index.h(index.Host, { key: 'ff8c7f78b4ec3527e2c81c087f5408179adebfcc' }, index.h("span", { key: '153b5c19ae46ac34969ddefc39d880dbbe87632d', class: "badge", part: "badge" }, index.h("slot", { key: 'ec5c0fe94ace0a7084ce567567dd8b8995ea62bd' }))));
+    }
+};
+IndBadge.style = badgeCss();
+
+exports.ind_badge = IndBadge;
+//# sourceMappingURL=ind-badge.entry.cjs.js.map
+
+//# sourceMappingURL=ind-badge.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-badge.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,y+DAAy+D,CAAC;;MCmBr/D,QAAQ,GAAA,MAAA;;;;;IAEM,OAAO,GAAiB,SAAS;;IAGjC,IAAI,GAAc,IAAI;;IAGtB,OAAO,GAAY,KAAK;IAEjD,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACF;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/badge/badge.css?tag=ind-badge&encapsulation=shadow","src/components/atoms/badge/badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  --_bg: var(--ind-surface-raised, #1b222c);\n  --_fg: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_border: var(--ind-surface-border-default, #2a3340);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  padding: 1px var(--ind-spacing-3, 6px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: var(--ind-font-line-height-tight, 1.1);\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n  white-space: nowrap;\n  color: var(--_fg);\n  background: var(--_bg);\n  border: 1px solid var(--_border);\n  border-radius: var(--ind-radius-full, 9999px);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n:host([size=\"md\"]) .badge { font-size: var(--ind-font-size-xs, 10px); padding: 2px var(--ind-spacing-3, 6px); }\n:host([size=\"sm\"]) .badge { font-size: 9px; padding: 0 var(--ind-spacing-2, 4px); }\n\n:host([variant=\"running\"]),\n:host([variant=\"success\"]) { --_bg: var(--ind-state-running-bg, #16a34a); --_fg: var(--ind-state-running-fg, #fff); --_border: var(--ind-state-running-border, #4ade80); }\n:host([variant=\"stopped\"]) { --_bg: var(--ind-state-stopped-bg, #5a6776); --_fg: var(--ind-state-stopped-fg, #fff); --_border: var(--ind-state-stopped-border, #8390a0); }\n:host([variant=\"fault\"]),\n:host([variant=\"error\"])   { --_bg: var(--ind-state-fault-bg, #dc2626); --_fg: var(--ind-state-fault-fg, #fff); --_border: var(--ind-state-fault-border, #f87171); }\n:host([variant=\"warning\"]) { --_bg: var(--ind-state-warning-bg, #f59e0b); --_fg: var(--ind-state-warning-fg, #1a1205); --_border: var(--ind-state-warning-border, #fcd34d); }\n:host([variant=\"maintenance\"]) { --_bg: var(--ind-state-maintenance-bg, #2563eb); --_fg: var(--ind-state-maintenance-fg, #fff); --_border: var(--ind-state-maintenance-border, #60a5fa); }\n:host([variant=\"info\"])    { --_bg: var(--ind-feedback-info-bg, #0891b2); --_fg: var(--ind-feedback-info-fg, #fff); --_border: var(--ind-feedback-info-border, #67e8f9); }\n\n:host([outline]) .badge {\n  background: transparent;\n  color: var(--_border);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type BadgeVariant =\n  | 'neutral'\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'success'\n  | 'info'\n  | 'error';\nexport type BadgeSize = 'sm' | 'md';\n\n@Component({\n  tag: 'ind-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class IndBadge {\n  /** Semantic color. Maps to state / feedback tokens. */\n  @Prop({ reflect: true }) variant: BadgeVariant = 'neutral';\n\n  /** Size. */\n  @Prop({ reflect: true }) size: BadgeSize = 'md';\n\n  /** Outlined instead of filled. */\n  @Prop({ reflect: true }) outline: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"badge\" part=\"badge\">\n          <slot />\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-batch-control-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 batchControlPanelCss = () => `:host{min-width:320px}ind-progress{width:100%}.phase{display:flex;align-items:baseline;gap:var(--ind-spacing-3, 6px)}.phase-label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted)}.phase-name{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600)}.state{font-size:var(--ind-font-size-sm, 11px);font-weight:var(--ind-font-weight-bold, 700);padding:2px 8px;border-radius:var(--ind-radius-full, 9999px);background:var(--ind-surface-raised)}.state-running{color:var(--ind-state-running-bg, #16a34a)}.state-held{color:var(--ind-state-warning-bg, #f59e0b)}.state-fault{color:var(--ind-state-fault-bg, #dc2626)}.state-complete{color:var(--ind-color-palette-cyan-300, #22d3ee)}.params{display:flex;flex-direction:column;border:1px solid var(--ind-surface-border-subtle);border-radius:var(--ind-radius-sm, 2px)}`;
+
+const STATE_LABEL = {
+    idle: 'Idle',
+    running: 'Running',
+    held: 'Held',
+    complete: 'Complete',
+    fault: 'Fault',
+};
+const IndBatchControlPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indStart = index.createEvent(this, "indStart");
+        this.indHold = index.createEvent(this, "indHold");
+        this.indStop = index.createEvent(this, "indStop");
+    }
+    heading = 'Batch control';
+    /** Batch / lot identifier. */
+    batchId;
+    /** Current phase / step name. */
+    phase;
+    /** Batch state — drives the badge. */
+    state = 'idle';
+    /** Phase progress 0–100 %. */
+    progress = 0;
+    /** Active parameters. */
+    parameters = [];
+    indStart;
+    indHold;
+    indStop;
+    render() {
+        const running = this.state === 'running';
+        const progressVariant = this.state === 'fault' ? 'error' : this.state === 'held' ? 'warning' : 'default';
+        return (index.h(index.Host, { key: '360352d8819d7d5a116b3e92d326dd673514b491' }, index.h("div", { key: '93b95f77983940a84936e7cc583b5df407ced82a', class: "panel-head" }, index.h("div", { key: 'd7e2993d2d9eac492ef60c37bcb9ae5b78507ec8', class: "panel-titles" }, index.h("span", { key: '8ccbe6dce41a8cb66066141b15ca7f04ead1a713', class: "panel-title", part: "heading" }, this.heading), this.batchId && index.h("span", { key: '69d40b525971ada02d15e907cf4652974acab222', class: "panel-subtitle" }, "Batch ", this.batchId)), index.h("span", { key: 'd36e094bb538c5b391e22e5da32dbcedaa86f19b', class: `state state-${this.state}`, part: "state" }, STATE_LABEL[this.state])), index.h("div", { key: '8dcf054cccc1831150cf938d429074f0e8fc32e2', class: "panel-body" }, this.phase && (index.h("div", { key: '9ec2cb3823c53a76242d7aa40510954f6f1779d3', class: "phase", part: "phase" }, index.h("span", { key: 'fe72a704ec0933d79c9e4e3dab55cf7a1cfedbdc', class: "phase-label" }, "Phase"), index.h("span", { key: 'b1bd64a6de46e6c647da7a9902cb9348fcb7a479', class: "phase-name" }, this.phase))), index.h("ind-progress", { key: '27b250908786d280b3c845c5c6d1131be306b62e', value: this.progress, max: 100, variant: progressVariant, size: "md", "show-value": true }), index.h("ind-command-group", { key: '0739bc80b204905295ee82feadeaf2c571a975d1', label: "Batch commands" }, index.h("ind-button", { key: 'bd06dcc9d3d6793acd0fd89dffaa96511fbd7dc7', variant: "primary", size: "sm", label: "Start", disabled: running, onIndActivate: () => this.indStart.emit() }), index.h("ind-button", { key: 'b63daaaaa133f1c1b46abd192e7efe95ae13ea9f', variant: "default", size: "sm", label: "Hold", disabled: !running, onIndActivate: () => this.indHold.emit() }), index.h("ind-button", { key: '4086f63667d7a16460e676721887ac6bb6b8d19f', variant: "danger", size: "sm", label: "Stop", disabled: this.state === 'idle', onIndActivate: () => this.indStop.emit() })), this.parameters.length > 0 && (index.h("div", { key: 'c261467ad480e31dc519cb462cf911fe062d0337', 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: true }))))))));
+    }
+};
+IndBatchControlPanel.style = panelCss() + batchControlPanelCss();
+
+exports.ind_batch_control_panel = IndBatchControlPanel;
+//# sourceMappingURL=ind-batch-control-panel.entry.cjs.js.map
+
+//# sourceMappingURL=ind-batch-control-panel.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-batch-control-panel.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,oBAAoB,GAAG,MAAM,CAAC,64BAA64B,CAAC;;ACWl7B,MAAM,WAAW,GAA+B;AAC9C,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,KAAK,EAAE,OAAO;CACf;MAWY,oBAAoB,GAAA,MAAA;;;;;;;IACvB,OAAO,GAAW,eAAe;;AAEjC,IAAA,OAAO;;AAEP,IAAA,KAAK;;IAEY,KAAK,GAAe,MAAM;;IAE3C,QAAQ,GAAW,CAAC;;IAEpB,UAAU,GAAiB,EAAE;AAE5B,IAAA,QAAQ;AACR,IAAA,OAAO;AACP,IAAA,OAAO;IAEhB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS;QACxC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS;QACxG,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,OAAO,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,YAAQ,IAAI,CAAC,OAAO,CAAQ,CACrE,EACNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,KAAK,CAAA,CAAE,EAAE,IAAI,EAAC,OAAO,EAAA,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAQ,CACnF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,KAAK,KACTA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAA,OAAA,CAAa,EACtCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxC,CACP,EACDA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAC,IAAI,EAAA,YAAA,EAAA,IAAA,EAAA,CAA2B,EAC5GA,OAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,KAAK,EAAC,gBAAgB,EAAA,EACvCA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAA,CAAI,EACtHA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CAAI,EACrHA,OAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAY,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GAAI,CAC/G,EACnB,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,qCACE,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,EAAA,IAAA,EAAA,CACR,CACH,CAAC,CACE,CACP,CACG,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-batch-control-panel&encapsulation=shadow","src/components/organisms/batch-control-panel/batch-control-panel.css?tag=ind-batch-control-panel&encapsulation=shadow","src/components/organisms/batch-control-panel/batch-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: 320px;\n}\n\nind-progress {\n  width: 100%;\n}\n\n.phase {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.phase-label {\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);\n}\n\n.phase-name {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.state {\n  font-size: var(--ind-font-size-sm, 11px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  padding: 2px 8px;\n  border-radius: var(--ind-radius-full, 9999px);\n  background: var(--ind-surface-raised);\n}\n\n.state-running { color: var(--ind-state-running-bg, #16a34a); }\n.state-held { color: var(--ind-state-warning-bg, #f59e0b); }\n.state-fault { color: var(--ind-state-fault-bg, #dc2626); }\n.state-complete { color: var(--ind-color-palette-cyan-300, #22d3ee); }\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';\n\nexport type BatchState = 'idle' | 'running' | 'held' | 'complete' | 'fault';\n\nexport interface BatchParam {\n  label: string;\n  value: string | number;\n  unit?: string;\n  target?: string;\n}\n\nconst STATE_LABEL: Record<BatchState, string> = {\n  idle: 'Idle',\n  running: 'Running',\n  held: 'Held',\n  complete: 'Complete',\n  fault: 'Fault',\n};\n\n/**\n * Batch / phase control panel: current phase + progress, Start / Hold / Stop\n * commands and the active parameter set.\n */\n@Component({\n  tag: 'ind-batch-control-panel',\n  styleUrls: ['../_shared/panel.css', 'batch-control-panel.css'],\n  shadow: true,\n})\nexport class IndBatchControlPanel {\n  @Prop() heading: string = 'Batch control';\n  /** Batch / lot identifier. */\n  @Prop() batchId?: string;\n  /** Current phase / step name. */\n  @Prop() phase?: string;\n  /** Batch state — drives the badge. */\n  @Prop({ reflect: true }) state: BatchState = 'idle';\n  /** Phase progress 0–100 %. */\n  @Prop() progress: number = 0;\n  /** Active parameters. */\n  @Prop() parameters: BatchParam[] = [];\n\n  @Event() indStart!: EventEmitter<void>;\n  @Event() indHold!: EventEmitter<void>;\n  @Event() indStop!: EventEmitter<void>;\n\n  render() {\n    const running = this.state === 'running';\n    const progressVariant = this.state === 'fault' ? 'error' : this.state === 'held' ? 'warning' : 'default';\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.batchId && <span class=\"panel-subtitle\">Batch {this.batchId}</span>}\n          </div>\n          <span class={`state state-${this.state}`} part=\"state\">{STATE_LABEL[this.state]}</span>\n        </div>\n        <div class=\"panel-body\">\n          {this.phase && (\n            <div class=\"phase\" part=\"phase\">\n              <span class=\"phase-label\">Phase</span>\n              <span class=\"phase-name\">{this.phase}</span>\n            </div>\n          )}\n          <ind-progress value={this.progress} max={100} variant={progressVariant} size=\"md\" show-value></ind-progress>\n          <ind-command-group label=\"Batch commands\">\n            <ind-button variant=\"primary\" size=\"sm\" label=\"Start\" disabled={running} onIndActivate={() => this.indStart.emit()} />\n            <ind-button variant=\"default\" size=\"sm\" label=\"Hold\" disabled={!running} onIndActivate={() => this.indHold.emit()} />\n            <ind-button variant=\"danger\" size=\"sm\" label=\"Stop\" disabled={this.state === 'idle'} onIndActivate={() => this.indStop.emit()} />\n          </ind-command-group>\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\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}