@ind-ds/core 0.1.1 → 0.2.0

package/dist/cjs/ind-trend-viewer.cjs.entry.js

@@ -0,0 +1,31 @@
+'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 trendViewerCss = () => `:host{min-width:360px}.series{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px)}.series-head{display:flex;align-items:baseline;gap:var(--ind-spacing-3, 6px);font-size:var(--ind-font-size-sm, 11px)}.series-label{color:var(--ind-surface-text-secondary)}.series-value{margin-left:auto;font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);color:var(--ind-surface-text-primary)}.legend{width:10px;height:10px;border-radius:2px;flex:0 0 auto;background:var(--ind-surface-text-muted)}.legend-running{background:var(--ind-state-running-bg, #16a34a)}.legend-warning{background:var(--ind-state-warning-bg, #f59e0b)}.legend-fault{background:var(--ind-state-fault-bg, #dc2626)}.legend-default{background:var(--ind-color-palette-cyan-300, #22d3ee)}.series-spark{width:100%;height:40px}`;
+
+const IndTrendViewer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Trends';
+    /** Series to plot. */
+    series = [];
+    last(s) {
+        if (!s.points.length)
+            return '--';
+        const v = s.points[s.points.length - 1];
+        return s.precision !== undefined ? v.toFixed(s.precision) : String(v);
+    }
+    render() {
+        return (index.h(index.Host, { key: '41e4221a264008e8405251a8701cc16576758fe7' }, index.h("div", { key: '9c0684d404e77dbb2de77d1873b933f58a420e85', class: "panel-head" }, index.h("span", { key: '596e6de04ef55e07038c9d7c78cbf258767c7699', class: "panel-title", part: "heading" }, this.heading)), index.h("div", { key: 'fd80bafe1fbe0a0f7bccc713a6ec0a13b5eb53b3', class: "panel-body" }, this.series.length === 0 ? (index.h("div", { class: "panel-empty" }, "No series")) : (this.series.map((s, i) => (index.h("div", { class: "series", part: "series", key: i }, index.h("div", { class: "series-head" }, index.h("span", { class: `legend legend-${s.variant ?? 'default'}`, "aria-hidden": "true" }), index.h("span", { class: "series-label" }, s.label), index.h("span", { class: "series-value" }, this.last(s), s.unit ? ` ${s.unit}` : '')), index.h("ind-sparkline", { class: "series-spark", points: s.points, variant: s.variant ?? 'default', area: true }))))))));
+    }
+};
+IndTrendViewer.style = panelCss() + trendViewerCss();
+
+exports.ind_trend_viewer = IndTrendViewer;
+//# sourceMappingURL=ind-trend-viewer.entry.cjs.js.map
+
+//# sourceMappingURL=ind-trend-viewer.cjs.entry.js.map

package/dist/cjs/ind-trend-viewer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-trend-viewer.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,cAAc,GAAG,MAAM,CAAC,uzBAAuzB,CAAC;;MCqBz0B,cAAc,GAAA,MAAA;;;;IACjB,OAAO,GAAW,QAAQ;;IAE1B,MAAM,GAAkB,EAAE;AAE1B,IAAA,IAAI,CAAC,CAAc,EAAA;AACzB,QAAA,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;AACjC,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACvC,OAAO,CAAC,CAAC,SAAS,KAAK,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC;;IAGvE,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,EACpB,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,EAAE,CAAC,MACnBA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,EACtCA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,CAAA,cAAA,EAAiB,CAAC,CAAC,OAAO,IAAI,SAAS,CAAA,CAAE,EAAA,aAAA,EAAc,MAAM,EAAA,CAAQ,EAClFA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,IAAE,CAAC,CAAC,KAAK,CAAQ,EAC3CA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAA,EACvB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAA,CAAA,EAAI,CAAC,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE,CACpC,CACH,EACNA,OAAA,CAAA,eAAA,EAAA,EAAe,KAAK,EAAC,cAAc,EAAC,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,SAAS,EAAE,IAAI,EAAA,IAAA,EAAA,CAAiB,CACxG,CACP,CAAC,CACH,CACG,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-trend-viewer&encapsulation=shadow","src/components/organisms/trend-viewer/trend-viewer.css?tag=ind-trend-viewer&encapsulation=shadow","src/components/organisms/trend-viewer/trend-viewer.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.series {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n}\n\n.series-head {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-3, 6px);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.series-label {\n  color: var(--ind-surface-text-secondary);\n}\n\n.series-value {\n  margin-left: auto;\n  font-family: var(--ind-font-family-mono);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  color: var(--ind-surface-text-primary);\n}\n\n.legend {\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n  flex: 0 0 auto;\n  background: var(--ind-surface-text-muted);\n}\n\n.legend-running { background: var(--ind-state-running-bg, #16a34a); }\n.legend-warning { background: var(--ind-state-warning-bg, #f59e0b); }\n.legend-fault { background: var(--ind-state-fault-bg, #dc2626); }\n.legend-default { background: var(--ind-color-palette-cyan-300, #22d3ee); }\n\n.series-spark {\n  width: 100%;\n  height: 40px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TrendVariant } from '../../molecules/trend-widget/trend-widget';\n\nexport interface TrendSeries {\n  label: string;\n  points: number[];\n  unit?: string;\n  variant?: TrendVariant;\n  precision?: number;\n}\n\n/**\n * Multi-series trend viewer. Stacks one labelled `<ind-sparkline>` per series\n * with the current value, for comparing several tags without a full charting\n * library.\n */\n@Component({\n  tag: 'ind-trend-viewer',\n  styleUrls: ['../_shared/panel.css', 'trend-viewer.css'],\n  shadow: true,\n})\nexport class IndTrendViewer {\n  @Prop() heading: string = 'Trends';\n  /** Series to plot. */\n  @Prop() series: TrendSeries[] = [];\n\n  private last(s: TrendSeries): string {\n    if (!s.points.length) return '--';\n    const v = s.points[s.points.length - 1];\n    return s.precision !== undefined ? v.toFixed(s.precision) : String(v);\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          {this.series.length === 0 ? (\n            <div class=\"panel-empty\">No series</div>\n          ) : (\n            this.series.map((s, i) => (\n              <div class=\"series\" part=\"series\" key={i}>\n                <div class=\"series-head\">\n                  <span class={`legend legend-${s.variant ?? 'default'}`} aria-hidden=\"true\"></span>\n                  <span class=\"series-label\">{s.label}</span>\n                  <span class=\"series-value\">\n                    {this.last(s)}{s.unit ? ` ${s.unit}` : ''}\n                  </span>\n                </div>\n                <ind-sparkline class=\"series-spark\" points={s.points} variant={s.variant ?? 'default'} area></ind-sparkline>\n              </div>\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-trend-widget.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+
+const trendWidgetCss = () => `:host{min-width:200px}.spark{width:100%;height:44px}.bounds{display:flex;justify-content:space-between;font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted)}`;
+
+const IndTrendWidget = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Series label (e.g. "Discharge pressure"). */
+    label;
+    /** Process tag. */
+    tag;
+    /** Current value (defaults to the last point). */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Decimal places. */
+    precision = 1;
+    /** Recent samples. */
+    points = [];
+    /** Sparkline lower bound (auto if omitted). */
+    min;
+    /** Sparkline upper bound (auto if omitted). */
+    max;
+    /** Sparkline color variant. */
+    variant = 'default';
+    current() {
+        if (this.value !== undefined)
+            return this.value;
+        return this.points.length ? this.points[this.points.length - 1] : undefined;
+    }
+    render() {
+        const cur = this.current();
+        const lo = this.min ?? (this.points.length ? Math.min(...this.points) : undefined);
+        const hi = this.max ?? (this.points.length ? Math.max(...this.points) : undefined);
+        return (index.h(index.Host, { key: 'eb9a651961a5989007c7c746f435552249f64938', role: "group", "aria-label": this.label }, index.h("div", { key: 'e4e3160f886ed6d0419f49c722d4e47cb6fc2a5a', class: "card-head" }, index.h("span", { key: 'cb6534bfb01a54e30c5d4ab46b9c11de6f6f633d', class: "card-title", part: "label" }, this.label), this.tag && index.h("span", { key: '1e9f94807667aab363d7b7ee49b60e0fefd55f7b', class: "card-tag", part: "tag" }, this.tag)), cur !== undefined && (index.h("ind-value", { key: '4e1ee4fd15d6dc61ded72b81f5393ea5a996f234', part: "value", value: cur, unit: this.unit, precision: this.precision, size: "lg" })), this.points.length > 1 && (index.h("ind-sparkline", { key: 'eee4f130adbb659f75ab6c1a004f770bf5ff92ad', class: "spark", part: "spark", points: this.points, min: this.min, max: this.max, variant: this.variant, area: true })), lo !== undefined && hi !== undefined && (index.h("div", { key: 'bb09835b6ee49b2aa80a05867222cf7893bfbf89', class: "bounds", part: "bounds" }, index.h("span", { key: 'd9e5ec2921d758508439e573eae0bd07a3c5bc30' }, "min ", lo.toFixed(this.precision)), index.h("span", { key: '8e889674c72bc88d2915c15209534bfe92ed10c9' }, "max ", hi.toFixed(this.precision))))));
+    }
+};
+IndTrendWidget.style = cardCss() + trendWidgetCss();
+
+exports.ind_trend_widget = IndTrendWidget;
+//# sourceMappingURL=ind-trend-widget.entry.cjs.js.map
+
+//# sourceMappingURL=ind-trend-widget.cjs.entry.js.map

package/dist/cjs/ind-trend-widget.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-trend-widget.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/molecules/_shared/card.css?tag=ind-trend-widget&encapsulation=shadow","src/components/molecules/trend-widget/trend-widget.css?tag=ind-trend-widget&encapsulation=shadow","src/components/molecules/trend-widget/trend-widget.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  box-sizing: border-box;\n  min-width: 160px;\n}\n\n.card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n",":host {\n  min-width: 200px;\n}\n\n.spark {\n  width: 100%;\n  height: 44px;\n}\n\n.bounds {\n  display: flex;\n  justify-content: space-between;\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-muted);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TrendVariant = 'default' | 'running' | 'warning' | 'fault';\n\n/**\n * Compact trend widget: current value, an `<ind-sparkline>` of the recent\n * window, and min/max bounds. For dense dashboards where a full trend chart is\n * too heavy.\n */\n@Component({\n  tag: 'ind-trend-widget',\n  styleUrls: ['../_shared/card.css', 'trend-widget.css'],\n  shadow: true,\n})\nexport class IndTrendWidget {\n  /** Series label (e.g. \"Discharge pressure\"). */\n  @Prop() label!: string;\n  /** Process tag. */\n  @Prop() tag?: string;\n  /** Current value (defaults to the last point). */\n  @Prop() value?: number;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Decimal places. */\n  @Prop() precision: number = 1;\n  /** Recent samples. */\n  @Prop() points: number[] = [];\n  /** Sparkline lower bound (auto if omitted). */\n  @Prop() min?: number;\n  /** Sparkline upper bound (auto if omitted). */\n  @Prop() max?: number;\n  /** Sparkline color variant. */\n  @Prop() variant: TrendVariant = 'default';\n\n  private current(): number | undefined {\n    if (this.value !== undefined) return this.value;\n    return this.points.length ? this.points[this.points.length - 1] : undefined;\n  }\n\n  render() {\n    const cur = this.current();\n    const lo = this.min ?? (this.points.length ? Math.min(...this.points) : undefined);\n    const hi = this.max ?? (this.points.length ? Math.max(...this.points) : undefined);\n    return (\n      <Host role=\"group\" aria-label={this.label}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{this.label}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        {cur !== undefined && (\n          <ind-value part=\"value\" value={cur} unit={this.unit} precision={this.precision} size=\"lg\" />\n        )}\n        {this.points.length > 1 && (\n          <ind-sparkline\n            class=\"spark\"\n            part=\"spark\"\n            points={this.points}\n            min={this.min}\n            max={this.max}\n            variant={this.variant}\n            area\n          />\n        )}\n        {lo !== undefined && hi !== undefined && (\n          <div class=\"bounds\" part=\"bounds\">\n            <span>min {lo.toFixed(this.precision)}</span>\n            <span>max {hi.toFixed(this.precision)}</span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-unit-label.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const unitLabelCss = () => `:host{display:inline;--_size:var(--ind-font-size-sm, 11px)}:host([size="sm"]){--_size:var(--ind-font-size-xs, 10px)}:host([size="md"]){--_size:var(--ind-font-size-sm, 11px)}:host([size="lg"]){--_size:var(--ind-font-size-base, 12px)}.unit{font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--_size);font-weight:var(--ind-font-weight-regular, 400);color:var(--ind-surface-text-muted, #7a8694);white-space:nowrap}`;
+
+const IndUnitLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Engineering unit text, e.g. "bar", "°C", "m³/h". Falls back to the slot. */
+    unit;
+    /** Size. */
+    size = 'md';
+    render() {
+        return (index.h(index.Host, { key: 'a9e238538522e256db732662118527fdc2673283' }, index.h("span", { key: 'd5398ae306ff94e2f9ccfd608e9f28f03b749be7', class: "unit", part: "unit" }, this.unit ?? index.h("slot", { key: '6791682a0b3ab6e537a7ad4dd321a5d279a3e38d' }))));
+    }
+};
+IndUnitLabel.style = unitLabelCss();
+
+exports.ind_unit_label = IndUnitLabel;
+//# sourceMappingURL=ind-unit-label.entry.cjs.js.map
+
+//# sourceMappingURL=ind-unit-label.cjs.entry.js.map

package/dist/cjs/ind-unit-label.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-unit-label.cjs.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,obAAob,CAAC;;MCSpc,YAAY,GAAA,MAAA;;;;;AAEf,IAAA,IAAI;;IAEa,IAAI,GAAkB,IAAI;IAEnD,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,IAAI,CAAC,IAAI,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACjB,CACF;;;;;;;","names":["h","Host"],"sources":["src/components/atoms/unit-label/unit-label.css?tag=ind-unit-label&encapsulation=shadow","src/components/atoms/unit-label/unit-label.tsx"],"sourcesContent":[":host {\n  display: inline;\n  --_size: var(--ind-font-size-sm, 11px);\n}\n\n:host([size=\"sm\"]) { --_size: var(--ind-font-size-xs, 10px); }\n:host([size=\"md\"]) { --_size: var(--ind-font-size-sm, 11px); }\n:host([size=\"lg\"]) { --_size: var(--ind-font-size-base, 12px); }\n\n.unit {\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--_size);\n  font-weight: var(--ind-font-weight-regular, 400);\n  color: var(--ind-surface-text-muted, #7a8694);\n  white-space: nowrap;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type UnitLabelSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-unit-label',\n  styleUrl: 'unit-label.css',\n  shadow: true,\n})\nexport class IndUnitLabel {\n  /** Engineering unit text, e.g. \"bar\", \"°C\", \"m³/h\". Falls back to the slot. */\n  @Prop() unit?: string;\n  /** Size. */\n  @Prop({ reflect: true }) size: UnitLabelSize = 'md';\n\n  render() {\n    return (\n      <Host>\n        <span class=\"unit\" part=\"unit\">\n          {this.unit ?? <slot />}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 
 const valueCss = () => `:host{display:inline-flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);background:var(--ind-surface-sunken, #000);border:1px solid var(--ind-surface-border-default, #2a3340);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));min-width:96px;transition:background-color var(--ind-motion-duration-base, 200ms),     border-color var(--ind-motion-duration-base, 200ms),     color var(--ind-motion-duration-base, 200ms)}.header{display:flex;gap:var(--ind-spacing-3, 6px);align-items:baseline;font-size:var(--ind-font-size-sm, 11px);line-height:var(--ind-font-line-height-tight, 1.1);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.tag{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);letter-spacing:0.02em}.label{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.readout{display:flex;align-items:baseline;gap:var(--ind-spacing-2, 4px);line-height:1}.number{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-bold, 700);font-variant-numeric:tabular-nums}.unit{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));font-weight:var(--ind-font-weight-medium, 500)}.trend{font-size:var(--ind-font-size-md, 13px);margin-left:var(--ind-spacing-2, 4px)}:host([size="sm"]) .number{font-size:var(--ind-font-size-xl, 16px)}:host([size="md"]) .number{font-size:var(--ind-font-size-2xl, 20px)}:host([size="lg"]) .number{font-size:var(--ind-font-size-3xl, 28px)}:host([alarm="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([alarm="high"]){background:var(--ind-alarm-high-bg, #f59e0b);color:var(--ind-alarm-high-fg, #000000);border-color:var(--ind-alarm-high-border, #fcd34d)}:host([alarm="low"]){background:var(--ind-alarm-low-bg, #0891b2);color:var(--ind-alarm-low-fg, #ffffff);border-color:var(--ind-alarm-low-border, #22d3ee)}:host([alarm="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([alarm]:not([alarm="none"])) .header,:host([alarm]:not([alarm="none"])) .tag,:host([alarm]:not([alarm="none"])) .label,:host([alarm]:not([alarm="none"])) .unit{color:inherit}:host([alarm]:not([alarm="none"])) .label,:host([alarm]:not([alarm="none"])) .unit{opacity:0.85}:host([alarm]:not([alarm="none"])) .tag{opacity:1;font-weight:var(--ind-font-weight-bold, 700)}:host([trend="up"]) .trend{color:var(--ind-trend-up-fg, #fcd34d)}:host([trend="down"]) .trend{color:var(--ind-trend-down-fg, #22d3ee)}:host([trend="stable"]) .trend{color:var(--ind-trend-stable-fg, #8390a0)}`;
 
@@ -36,7 +36,7 @@ const IndValue = class {
     render() {
         const accessibleName = this.label ?? this.tag ?? 'process value';
         const alarmSuffix = this.alarm !== 'none' ? `, alarm ${this.alarm}` : '';
-        return (index.h(index.Host, { key: 'cda5c03f956f161e618626d2aef0aac40409281a', role: "group", "aria-label": `${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`, "aria-live": this.alarm === 'high-high' ? 'assertive' : 'polite' }, (this.tag || this.label) && (index.h("div", { key: '8fe9dfd6fb733e6ba0e7e607efc5d023736cca9e', class: "header", part: "header" }, this.tag && index.h("span", { key: 'adec308000bce2cee378504fffedf8662a091c8c', class: "tag", part: "tag" }, this.tag), this.label && index.h("span", { key: '4de4405dfbb798ca1781ade6fd7e1419089226ca', class: "label", part: "label" }, this.label))), index.h("div", { key: 'b7f9e66b333a6d7e3341585af4bba571dae65bf6', class: "readout", part: "readout" }, index.h("span", { key: 'c6a942f2a64187cf9acd75b112d262928556d84b', class: "number", part: "number" }, this.formatted()), this.unit && index.h("span", { key: '39714e17d50497d59afe6e81eca9b51cf2182332', class: "unit", part: "unit" }, this.unit), this.trend !== 'none' && (index.h("span", { key: '1e4f671cc86bf24617f26e3db4eb3709160291b3', class: "trend", part: "trend", "aria-hidden": "true" }, this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆')))));
+        return (index.h(index.Host, { key: '0438f53ccfd76d02f30a9d3d2df93ee422f5daa6', role: "group", "aria-label": `${accessibleName}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}${alarmSuffix}`, "aria-live": this.alarm === 'high-high' ? 'assertive' : 'polite' }, (this.tag || this.label) && (index.h("div", { key: '02d0e59899fe4a5e9261efbe11f998411992e79a', class: "header", part: "header" }, this.tag && index.h("span", { key: '673d7544ac10b9136023e126079e1966a5bfb3e7', class: "tag", part: "tag" }, this.tag), this.label && index.h("span", { key: '9092698fca1a1790de4a52fa741bde462289436f', class: "label", part: "label" }, this.label))), index.h("div", { key: '2387e1e924c1ee41cc38daf28de39466bfd65592', class: "readout", part: "readout" }, index.h("span", { key: '31748fea6210035a2a03fa588b873b1f3b1483d6', class: "number", part: "number" }, this.formatted()), this.unit && index.h("span", { key: 'c21057af583f90f4ba8e59d2964564f6484d58b1', class: "unit", part: "unit" }, this.unit), this.trend !== 'none' && (index.h("span", { key: 'cf485adac4029ace34c24bc5e1712287f2063300', class: "trend", part: "trend", "aria-hidden": "true" }, this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : '◆')))));
     }
 };
 IndValue.style = valueCss();

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

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const cardCss = () => `:host{display:flex;flex-direction:column;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-5, 12px);background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);box-sizing:border-box;min-width:160px}.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ind-spacing-3, 6px)}.card-title{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.08em;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}.card-detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="fault"]){border-color:var(--ind-state-fault-bg, #dc2626);box-shadow:0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent)}:host([state="warning"]){border-color:color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default))}`;
+
+const equipmentCardCss = () => `.body{display:flex;align-items:center;gap:var(--ind-spacing-5, 12px)}.symbol{flex:0 0 auto}.metrics{display:flex;flex-direction:column;gap:var(--ind-spacing-2, 4px);margin-left:auto;align-items:flex-end;text-align:right}`;
+
+const valveCardCss = () => `:host{min-width:190px}.state-label{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-semibold, 600)}.state-open{color:var(--ind-state-running-bg, #16a34a)}.state-closed{color:var(--ind-surface-text-secondary)}.state-transit{color:var(--ind-state-warning-bg, #f59e0b)}.state-fault{color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const STATE_LABEL = {
+    open: 'Open',
+    closed: 'Closed',
+    transit: 'In transit',
+    fault: 'Fault',
+};
+const IndValveCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Equipment tag (e.g. "FV-12"). */
+    tag;
+    /** Human label (e.g. "Discharge valve"). */
+    label;
+    /** Valve state — drives the symbol and fault chrome. */
+    state = 'closed';
+    /** Modulating position 0–100 %. Omit for on/off valves. */
+    position;
+    render() {
+        const name = this.label ?? this.tag ?? 'Valve';
+        const stateLabel = STATE_LABEL[this.state];
+        return (index.h(index.Host, { key: 'c11f424cdec484a92d55249e9bc2bf8d57ff37ff', role: "group", "aria-label": `${name} — ${stateLabel}` }, index.h("div", { key: 'd06530840195cf64a2dfa42bee2d75181a1f6b8a', class: "card-head" }, index.h("span", { key: '40f60181a5004a6775c075d1ddb8a1b8bef7fecc', class: "card-title", part: "label" }, name), this.tag && index.h("span", { key: 'a792bce6c1d47e9dfc55b4eeaecc33e12937de0a', class: "card-tag", part: "tag" }, this.tag)), index.h("div", { key: '959d680892bd242eb4f0bd7f3caa26608899dd3a', class: "body", part: "body" }, index.h("ind-valve", { key: '89179d37066242d82cb63c829d085746926b03c2', class: "symbol", state: this.state, size: "md" }), index.h("div", { key: '23fb8ecd64f0f119498e6de5eebdb8b092f82a3b', class: "metrics", part: "metrics" }, index.h("span", { key: '3b30ab720f8a36a012f9eda7187e13c5f5a8f77b', class: `state-label state-${this.state}`, part: "state-label" }, stateLabel), this.position !== undefined && (index.h("ind-value", { key: '2d9bd688111fcd2c2a0b8e2c0d6826bc807b682e', value: this.position, unit: "%", precision: 0, label: "Position", size: "sm" }))))));
+    }
+};
+IndValveCard.style = cardCss() + (equipmentCardCss() + valveCardCss());
+
+exports.ind_valve_card = IndValveCard;
+//# sourceMappingURL=ind-valve-card.entry.cjs.js.map
+
+//# sourceMappingURL=ind-valve-card.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-valve-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,gBAAgB,GAAG,MAAM,CAAC,4NAA4N,CAAC;;ACA7P,MAAM,YAAY,GAAG,MAAM,CAAC,yVAAyV,CAAC;;ACGtX,MAAM,WAAW,GAA+B;AAC9C,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,KAAK,EAAE,OAAO;CACf;MAWY,YAAY,GAAA,MAAA;;;;;AAEf,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEY,KAAK,GAAe,QAAQ;;AAE7C,IAAA,QAAQ;IAEhB,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO;QAC9C,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;QAC1C,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,MAAM,UAAU,CAAA,CAAE,EAAA,EACtDD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAQ,EAClD,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3BA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACzDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,kBAAA,EAAqB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAE,IAAI,EAAC,aAAa,EAAA,EAAE,UAAU,CAAQ,EACrF,IAAI,CAAC,QAAQ,KAAK,SAAS,KAC1BA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACtF,CACG,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/molecules/_shared/card.css?tag=ind-valve-card&encapsulation=shadow","src/components/molecules/_shared/equipment-card.css?tag=ind-valve-card&encapsulation=shadow","src/components/molecules/valve-card/valve-card.css?tag=ind-valve-card&encapsulation=shadow","src/components/molecules/valve-card/valve-card.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-5, 12px);\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n  box-sizing: border-box;\n  min-width: 160px;\n}\n\n.card-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n  border-color: var(--ind-state-fault-bg, #dc2626);\n  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n","/* Shared layout for the equipment faceplate cards (motor, pump, valve, tank).\n * Loaded after card.css and before each component's own sheet. */\n.body {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-5, 12px);\n}\n\n.symbol {\n  flex: 0 0 auto;\n}\n\n.metrics {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-2, 4px);\n  margin-left: auto;\n  align-items: flex-end;\n  text-align: right;\n}\n",":host {\n  min-width: 190px;\n}\n\n.state-label {\n  font-size: var(--ind-font-size-lg, 14px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.state-open   { color: var(--ind-state-running-bg, #16a34a); }\n.state-closed { color: var(--ind-surface-text-secondary); }\n.state-transit { color: var(--ind-state-warning-bg, #f59e0b); }\n.state-fault  { color: var(--ind-state-fault-bg, #dc2626); }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ValveState } from '../../atoms/valve/valve';\n\nconst STATE_LABEL: Record<ValveState, string> = {\n  open: 'Open',\n  closed: 'Closed',\n  transit: 'In transit',\n  fault: 'Fault',\n};\n\n/**\n * Valve faceplate: ISA `<ind-valve>` symbol plus open/closed state and an\n * optional position (%) for modulating valves.\n */\n@Component({\n  tag: 'ind-valve-card',\n  styleUrls: ['../_shared/card.css', '../_shared/equipment-card.css', 'valve-card.css'],\n  shadow: true,\n})\nexport class IndValveCard {\n  /** Equipment tag (e.g. \"FV-12\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Discharge valve\"). */\n  @Prop() label?: string;\n  /** Valve state — drives the symbol and fault chrome. */\n  @Prop({ reflect: true }) state: ValveState = 'closed';\n  /** Modulating position 0–100 %. Omit for on/off valves. */\n  @Prop() position?: number;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'Valve';\n    const stateLabel = STATE_LABEL[this.state];\n    return (\n      <Host role=\"group\" aria-label={`${name} — ${stateLabel}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{name}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <ind-valve class=\"symbol\" state={this.state} size=\"md\" />\n          <div class=\"metrics\" part=\"metrics\">\n            <span class={`state-label state-${this.state}`} part=\"state-label\">{stateLabel}</span>\n            {this.position !== undefined && (\n              <ind-value value={this.position} unit=\"%\" precision={0} label=\"Position\" size=\"sm\" />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const panelCss = () => `:host{display:flex;flex-direction:column;background:var(--ind-surface-panel);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-md, 3px);font-family:var(--ind-font-family-sans);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));box-sizing:border-box;overflow:hidden;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.panel-head{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);background:var(--ind-surface-raised);flex:0 0 auto}.panel-titles{display:flex;flex-direction:column;min-width:0}.panel-title{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1.2}.panel-subtitle{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}.panel-tag{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.panel-actions{margin-left:auto;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.panel-body{display:flex;flex-direction:column;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);min-height:0}.panel-toolbar{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);padding:var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);border-bottom:1px solid var(--ind-surface-border-subtle);flex:0 0 auto}.panel-list{display:flex;flex-direction:column;overflow:auto}.panel-grid{display:grid;gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px)}.panel-empty{padding:var(--ind-spacing-7, 20px);text-align:center;color:var(--ind-surface-text-muted);font-size:var(--ind-font-size-sm, 11px)}.panel-spacer{flex:1 1 auto}`;
+
+const controlPanelCss = () => `.panel-body>ind-motor-card,.panel-body>ind-pump-card,.panel-body>ind-valve-card,.panel-body>ind-start-stop-control,.panel-body>ind-setpoint-control,.panel-body>ind-speed-control,.panel-body>ind-mode-selector,.panel-body>ind-recipe-selector{border:0;padding:0;background:transparent;min-width:0}`;
+
+const valveControlPanelCss = () => `:host{min-width:280px}.panel-body>ind-speed-control{border:0;padding:0;background:transparent;min-width:0}`;
+
+const IndValveControlPanel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.indOpen = index.createEvent(this, "indOpen");
+        this.indClose = index.createEvent(this, "indClose");
+        this.indStop = index.createEvent(this, "indStop");
+        this.indPosition = index.createEvent(this, "indPosition");
+    }
+    heading = 'Valve';
+    tag;
+    state = 'closed';
+    /** Current position 0–100 %. Omit for on/off valves. */
+    position;
+    /** Allow position control (modulating valve). */
+    modulating = false;
+    /** Position setpoint (two-way). */
+    positionSetpoint = 0;
+    indOpen;
+    indClose;
+    indStop;
+    indPosition;
+    onPosition = (e) => {
+        e.stopPropagation();
+        this.positionSetpoint = e.detail;
+        this.indPosition.emit(e.detail);
+    };
+    render() {
+        return (index.h(index.Host, { key: '74b95bc52371eaf3cf2f9c6fc8dac870f9d0a924' }, index.h("div", { key: '8eb914ce80e6ecec77ca7d90701c7b8740c7a88d', class: "panel-head" }, index.h("div", { key: '039a4ddd60abd0fac126532f7fee460520133f19', class: "panel-titles" }, index.h("span", { key: '54b8fe643cfda21aac90342cd4b410dcbf0dffd8', class: "panel-title", part: "heading" }, this.heading), this.tag && index.h("span", { key: 'd68d221bd943d800eb4769f4508f1286d66d9807', class: "panel-subtitle" }, this.tag))), index.h("div", { key: '8c48ba95fefb7786345402d7dabfdfb9295ba72c', class: "panel-body" }, index.h("ind-valve-card", { key: '980a0022a24169b5b61ea84eb3b8bb0eef4e4b5a', tag: this.tag, label: this.heading, state: this.state, position: this.position }), index.h("ind-command-group", { key: '21c3046744b5bdbceeefc6e8923427eb78d485e1', label: "Valve commands" }, index.h("ind-button", { key: 'f4a1689c2a5d40b6c784db28e1c4e22ca95ab2dd', variant: "primary", size: "sm", label: "Open", disabled: this.state === 'open', onIndActivate: () => this.indOpen.emit() }), index.h("ind-button", { key: '8cb97ed73c20e47aab7c0a489a0efe02afa30f7c', variant: "default", size: "sm", label: "Stop", onIndActivate: () => this.indStop.emit() }), index.h("ind-button", { key: '9e9977fa80e7b587dd72c292bdb43e92cf2c817c', variant: "danger", size: "sm", label: "Close", disabled: this.state === 'closed', onIndActivate: () => this.indClose.emit() })), this.modulating && (index.h("ind-speed-control", { key: 'd18050f458cac0757676b87cbcd0d9db816ba94a', label: "Position setpoint", value: this.positionSetpoint, unit: "%", onIndChange: this.onPosition })))));
+    }
+};
+IndValveControlPanel.style = panelCss() + (controlPanelCss() + valveControlPanelCss());
+
+exports.ind_valve_control_panel = IndValveControlPanel;
+//# sourceMappingURL=ind-valve-control-panel.entry.cjs.js.map
+
+//# sourceMappingURL=ind-valve-control-panel.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"ind-valve-control-panel.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-valve-control-panel&encapsulation=shadow","src/components/organisms/_shared/control-panel.css?tag=ind-valve-control-panel&encapsulation=shadow","src/components/organisms/valve-control-panel/valve-control-panel.css?tag=ind-valve-control-panel&encapsulation=shadow","src/components/organisms/valve-control-panel/valve-control-panel.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n","/* Flatten the faceplate / control molecules when embedded in a control panel,\n * so the panel provides the single card chrome. */\n.panel-body > ind-motor-card,\n.panel-body > ind-pump-card,\n.panel-body > ind-valve-card,\n.panel-body > ind-start-stop-control,\n.panel-body > ind-setpoint-control,\n.panel-body > ind-speed-control,\n.panel-body > ind-mode-selector,\n.panel-body > ind-recipe-selector {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n",":host {\n  min-width: 280px;\n}\n\n.panel-body > ind-speed-control {\n  border: 0;\n  padding: 0;\n  background: transparent;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { ValveState } from '../../atoms/valve/valve';\n\n/**\n * Valve control panel: `<ind-valve-card>` faceplate plus Open / Close / Stop\n * commands and an optional position setpoint for modulating valves.\n */\n@Component({\n  tag: 'ind-valve-control-panel',\n  styleUrls: ['../_shared/panel.css', '../_shared/control-panel.css', 'valve-control-panel.css'],\n  shadow: true,\n})\nexport class IndValveControlPanel {\n  @Prop() heading: string = 'Valve';\n  @Prop() tag?: string;\n  @Prop({ reflect: true }) state: ValveState = 'closed';\n  /** Current position 0–100 %. Omit for on/off valves. */\n  @Prop() position?: number;\n  /** Allow position control (modulating valve). */\n  @Prop() modulating: boolean = false;\n  /** Position setpoint (two-way). */\n  @Prop({ mutable: true }) positionSetpoint: number = 0;\n\n  @Event() indOpen!: EventEmitter<void>;\n  @Event() indClose!: EventEmitter<void>;\n  @Event() indStop!: EventEmitter<void>;\n  @Event() indPosition!: EventEmitter<number>;\n\n  private onPosition = (e: CustomEvent<number>) => {\n    e.stopPropagation();\n    this.positionSetpoint = e.detail;\n    this.indPosition.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.tag && <span class=\"panel-subtitle\">{this.tag}</span>}\n          </div>\n        </div>\n        <div class=\"panel-body\">\n          <ind-valve-card tag={this.tag} label={this.heading} state={this.state} position={this.position} />\n          <ind-command-group label=\"Valve commands\">\n            <ind-button variant=\"primary\" size=\"sm\" label=\"Open\" disabled={this.state === 'open'} onIndActivate={() => this.indOpen.emit()} />\n            <ind-button variant=\"default\" size=\"sm\" label=\"Stop\" onIndActivate={() => this.indStop.emit()} />\n            <ind-button variant=\"danger\" size=\"sm\" label=\"Close\" disabled={this.state === 'closed'} onIndActivate={() => this.indClose.emit()} />\n          </ind-command-group>\n          {this.modulating && (\n            <ind-speed-control label=\"Position setpoint\" value={this.positionSetpoint} unit=\"%\" onIndChange={this.onPosition} />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ph7ZTjuY.js');
+var index = require('./index-BLwLw5-d.js');
 
 const valveCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);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));font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.symbol{--_w:var(--ind-valve-width, 48px);--_fill:var(--ind-state-stopped-bg, #5a6776);--_stroke:var(--ind-state-stopped-border, #8390a0);width:var(--_w);height:calc(var(--_w) / 2);display:block}:host([orientation="vertical"]) .symbol{transform:rotate(90deg)}:host([size="sm"]) .symbol{--_w:32px}:host([size="md"]) .symbol{--_w:48px}:host([size="lg"]) .symbol{--_w:72px}.left,.right{fill:var(--_fill);stroke:var(--_stroke);stroke-width:1.25;stroke-linejoin:round;transition:fill var(--ind-motion-duration-base, 200ms),     stroke var(--ind-motion-duration-base, 200ms)}.stem{stroke:var(--_stroke);stroke-width:2;stroke-linecap:round}:host([state="open"]) .symbol{--_fill:var(--ind-state-running-bg, #16a34a);--_stroke:var(--ind-state-running-border, #4ade80)}:host([state="closed"]) .symbol{--_fill:var(--ind-state-stopped-bg, #5a6776);--_stroke:var(--ind-state-stopped-border, #8390a0)}:host([state="fault"]) .symbol{--_fill:var(--ind-state-fault-bg, #dc2626);--_stroke:var(--ind-state-fault-border, #f87171)}:host([state="transit"]) .symbol{--_fill:var(--ind-state-warning-bg, #f59e0b);--_stroke:var(--ind-state-warning-border, #fcd34d)}:host([state="transit"]) .left,:host([state="transit"]) .right{stroke-dasharray:4 2;animation:ind-valve-march var(--ind-motion-blink-slow, 1000ms) linear infinite}@keyframes ind-valve-march{to{stroke-dashoffset:-6}}.caption{display:flex;gap:var(--ind-spacing-3, 6px);align-items:baseline;font-size:var(--ind-font-size-sm, 11px)}.tag{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600)}.label{color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}@media (prefers-reduced-motion: reduce){:host([state="transit"]) .left,:host([state="transit"]) .right{animation:none;stroke-dasharray:4 2}}`;
 
@@ -20,7 +20,7 @@ const IndValve = class {
     tag;
     render() {
         const name = this.label ?? this.tag ?? 'valve';
-        return (index.h(index.Host, { key: 'f0a9a4f7a1401c7ffc091bb10e52d13854e0fd42', role: "img", "aria-label": `${name} — ${this.state}` }, index.h("svg", { key: '1ba7a6466df31802d8ca141016670c6c301bc066', class: "symbol", part: "symbol", viewBox: "0 0 32 16", "aria-hidden": "true" }, index.h("polygon", { key: '89f77217a84e53606ce38e126c8ce87358fafb8b', class: "left", part: "left", points: "2,2 2,14 16,8" }), index.h("polygon", { key: '12ca5cd5ad1c117c48cc54275fe98509daba3267', class: "right", part: "right", points: "30,2 30,14 16,8" }), index.h("line", { key: '24510448beca41c7ab421b61c06de63840bddf99', class: "stem", part: "stem", x1: "16", y1: "2", x2: "16", y2: "14" })), (this.tag || this.label) && (index.h("div", { key: '18b6f7a60c0fdb8b5b7a688d5f6151811a9d587b', class: "caption", part: "caption" }, this.tag && index.h("span", { key: '7a8eb4c486380e3cb1a92e1ab3bdcbd2689cbd50', class: "tag", part: "tag" }, this.tag), this.label && index.h("span", { key: '6281ca7b4ae18e455a28b18890d28c58f38c14c1', class: "label", part: "label" }, this.label)))));
+        return (index.h(index.Host, { key: 'bd9ae874884967a2162437241683e5789e2ff14d', role: "img", "aria-label": `${name} — ${this.state}` }, index.h("svg", { key: '361db0923f6fdffb590957a3124e53e2f723a8c9', class: "symbol", part: "symbol", viewBox: "0 0 32 16", "aria-hidden": "true" }, index.h("polygon", { key: 'e32860333e95d358c2c95c79cc4beed6905e8561', class: "left", part: "left", points: "2,2 2,14 16,8" }), index.h("polygon", { key: '21f199edc91aa74af291a42141c688aa3b6879c0', class: "right", part: "right", points: "30,2 30,14 16,8" }), index.h("line", { key: '8210963f465b87635e26636c2473560e85d8e71f', class: "stem", part: "stem", x1: "16", y1: "2", x2: "16", y2: "14" })), (this.tag || this.label) && (index.h("div", { key: '9de1eb5632281114cacda7ed616a30ffee3bd0f7', class: "caption", part: "caption" }, this.tag && index.h("span", { key: '892735f7a70a476cbf65a55264ee27c57591b7fd', class: "tag", part: "tag" }, this.tag), this.label && index.h("span", { key: '78a09b9f107c1b4907e376bb4407a710236b78e0', class: "label", part: "label" }, this.label)))));
     }
 };
 IndValve.style = valveCss();

package/dist/cjs/ind-workstation-monitor.cjs.entry.js

@@ -0,0 +1,38 @@
+'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 workstationMonitorCss = () => `:host{min-width:320px}ind-progress{width:100%}.job{display:flex;align-items:baseline;gap:var(--ind-spacing-3, 6px)}.job-label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted)}.job-name{font-size:var(--ind-font-size-md, 13px);font-weight:var(--ind-font-weight-semibold, 600)}.figures{display:flex;gap:var(--ind-spacing-7, 20px)}`;
+
+const IndWorkstationMonitor = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    heading = 'Workstation';
+    /** Station identifier. */
+    station;
+    /** Operator name. */
+    operator;
+    /** Current job / order. */
+    job;
+    state = 'unknown';
+    /** Produced count. */
+    produced = 0;
+    /** Rejected count. */
+    rejected = 0;
+    /** Target count for the job. */
+    target;
+    render() {
+        const dot = this.state === 'unknown' ? 'neutral' : this.state;
+        const pct = this.target ? Math.min(100, (this.produced / this.target) * 100) : undefined;
+        return (index.h(index.Host, { key: '3042387aab261c601e8fae021d9de8108ef1b751' }, index.h("div", { key: '72dd0b1789eaadef3818056688ac612cc33d28cd', class: "panel-head" }, index.h("ind-status-dot", { key: '148cb8a09100f76e1983a55a4eea037e5f428c83', state: dot, size: "md" }), index.h("div", { key: 'f0d61a7876169d7a3c56bf71570087c46d0a727c', class: "panel-titles" }, index.h("span", { key: '058b303344dff73cb12ba6d5816d9ce93104a243', class: "panel-title", part: "heading" }, this.heading, this.station ? ` · ${this.station}` : ''), this.operator && index.h("span", { key: '0740383db6db47bd0f40dbab0b130c61dbb19c7e', class: "panel-subtitle" }, "Operator: ", this.operator))), index.h("div", { key: '8965c44f49adf59d4d0eb669162d0c7a7d110546', class: "panel-body" }, this.job && (index.h("div", { key: '7c3a5b63e1342a4c7032d014511ed50fa162f82e', class: "job", part: "job" }, index.h("span", { key: '3e72a454ab981f49ce22610babb3333770eda389', class: "job-label" }, "Job"), index.h("span", { key: '923b7a3833b50ca1f04c14fc2c68d0b771230408', class: "job-name" }, this.job))), index.h("div", { key: '6524d5b7481463bc19f41b3fc44cecab08600789', class: "figures", part: "figures" }, index.h("ind-value", { key: 'e8fef2d434b95122645e40c70498f3d5f811302b', value: this.produced, label: "Produced", size: "lg" }), index.h("ind-value", { key: 'ee3011ffd166646361a0c728f26d5dc2f5952439', value: this.rejected, label: "Rejected", alarm: this.rejected > 0 ? 'high' : 'none', size: "md" }), this.target !== undefined && (index.h("ind-value", { key: 'ba782302d9ceb5ec0b25bdea3077973a41fcf77a', value: this.target, label: "Target", size: "md" }))), pct !== undefined && (index.h("ind-progress", { key: 'b0c35cce15e739653d6f1b0bd217da85c8e33c8d', value: pct, max: 100, variant: "success", size: "md", "show-value": true })))));
+    }
+};
+IndWorkstationMonitor.style = panelCss() + workstationMonitorCss();
+
+exports.ind_workstation_monitor = IndWorkstationMonitor;
+//# sourceMappingURL=ind-workstation-monitor.entry.cjs.js.map
+
+//# sourceMappingURL=ind-workstation-monitor.cjs.entry.js.map

package/dist/cjs/ind-workstation-monitor.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-workstation-monitor.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/organisms/_shared/panel.css?tag=ind-workstation-monitor&encapsulation=shadow","src/components/organisms/workstation-monitor/workstation-monitor.css?tag=ind-workstation-monitor&encapsulation=shadow","src/components/organisms/workstation-monitor/workstation-monitor.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.job {\n  display: flex;\n  align-items: baseline;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.job-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.job-name {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.figures {\n  display: flex;\n  gap: var(--ind-spacing-7, 20px);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentCardState } from '../../molecules/equipment-status-card/equipment-status-card';\n\n/**\n * Operator workstation monitor: station + operator, current job, produced /\n * rejected counts and progress to target.\n */\n@Component({\n  tag: 'ind-workstation-monitor',\n  styleUrls: ['../_shared/panel.css', 'workstation-monitor.css'],\n  shadow: true,\n})\nexport class IndWorkstationMonitor {\n  @Prop() heading: string = 'Workstation';\n  /** Station identifier. */\n  @Prop() station?: string;\n  /** Operator name. */\n  @Prop() operator?: string;\n  /** Current job / order. */\n  @Prop() job?: string;\n  @Prop({ reflect: true }) state: EquipmentCardState = 'unknown';\n  /** Produced count. */\n  @Prop() produced: number = 0;\n  /** Rejected count. */\n  @Prop() rejected: number = 0;\n  /** Target count for the job. */\n  @Prop() target?: number;\n\n  render() {\n    const dot = this.state === 'unknown' ? 'neutral' : this.state;\n    const pct = this.target ? Math.min(100, (this.produced / this.target) * 100) : undefined;\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <ind-status-dot state={dot as any} size=\"md\" />\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}{this.station ? ` · ${this.station}` : ''}</span>\n            {this.operator && <span class=\"panel-subtitle\">Operator: {this.operator}</span>}\n          </div>\n        </div>\n        <div class=\"panel-body\">\n          {this.job && (\n            <div class=\"job\" part=\"job\">\n              <span class=\"job-label\">Job</span>\n              <span class=\"job-name\">{this.job}</span>\n            </div>\n          )}\n          <div class=\"figures\" part=\"figures\">\n            <ind-value value={this.produced} label=\"Produced\" size=\"lg\"></ind-value>\n            <ind-value value={this.rejected} label=\"Rejected\" alarm={this.rejected > 0 ? 'high' : 'none'} size=\"md\"></ind-value>\n            {this.target !== undefined && (\n              <ind-value value={this.target} label=\"Target\" size=\"md\"></ind-value>\n            )}\n          </div>\n          {pct !== undefined && (\n            <ind-progress value={pct} max={100} variant=\"success\" size=\"md\" show-value></ind-progress>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ind-xy-point.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-BLwLw5-d.js');
+
+const xyPointCss = () => `:host{display:inline-block;width:var(--ind-xy-size, 120px);height:var(--ind-xy-size, 120px);--_accent:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}:host([variant="running"]){--_accent:var(--ind-state-running-bg, #16a34a)}:host([variant="warning"]){--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([variant="fault"]){--_accent:var(--ind-state-fault-bg, #dc2626)}.plot{display:block;width:100%;height:100%}.field{fill:var(--ind-surface-sunken, light-dark(#fff, #000));stroke:var(--ind-surface-border-default, #2a3340);stroke-width:1;vector-effect:non-scaling-stroke}.axis{stroke:var(--ind-surface-border-subtle, #2a3340);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}.trail{fill:none;stroke:color-mix(in srgb, var(--_accent) 50%, transparent);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}.point{fill:var(--_accent);stroke:var(--ind-surface-panel, #11161c);stroke-width:1.5;transition:cx var(--ind-motion-duration-base, 200ms) ease, cy var(--ind-motion-duration-base, 200ms) ease}@media (prefers-reduced-motion: reduce){.point{transition:none}}`;
+
+const IndXyPoint = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** X value of the operating point. */
+    x = 0;
+    /** Y value of the operating point. */
+    y = 0;
+    /** X axis bounds. */
+    xMin = 0;
+    xMax = 100;
+    /** Y axis bounds. */
+    yMin = 0;
+    yMax = 100;
+    /** Optional trail of past points, oldest → newest, as [x, y] pairs. Pass as a property. */
+    trail = [];
+    /** Color intent of the point. */
+    variant = 'default';
+    /** Accessible label. */
+    label;
+    w = 100;
+    hh = 100;
+    mapX(v) {
+        const span = this.xMax - this.xMin || 1;
+        return ((v - this.xMin) / span) * this.w;
+    }
+    mapY(v) {
+        const span = this.yMax - this.yMin || 1;
+        return this.hh - ((v - this.yMin) / span) * this.hh;
+    }
+    render() {
+        const px = this.mapX(this.x);
+        const py = this.mapY(this.y);
+        const trailPath = (this.trail ?? [])
+            .map((p, i) => `${i === 0 ? 'M' : 'L'}${this.mapX(p[0]).toFixed(1)},${this.mapY(p[1]).toFixed(1)}`)
+            .join(' ');
+        return (index.h(index.Host, { key: '34f5e9950ed30202bb232b92a0757d0fb8d336b5', role: "img", "aria-label": this.label ?? `operating point x ${this.x}, y ${this.y}` }, index.h("svg", { key: 'b0fcac199aa93ea9c9f43e7f4165e9dd440f04b9', class: "plot", part: "plot", viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("rect", { key: '8e84e601506d8ae9e7bdbcf086e594bc8dc095d1', class: "field", x: "0", y: "0", width: "100", height: "100" }), index.h("line", { key: '9dadfed6703161fade8bbbb7e5ab00b18a56f211', class: "axis", x1: "0", y1: "50", x2: "100", y2: "50" }), index.h("line", { key: '23600a64369f6d09c0b145d9452898163cd290cc', class: "axis", x1: "50", y1: "0", x2: "50", y2: "100" }), trailPath && index.h("path", { key: '4f68cdc008ce9658ae8e6590121a6a2aeaaf9661', class: "trail", part: "trail", d: trailPath }), index.h("circle", { key: 'a9304647f41f7d338f77fd52c6b3dd746c545c21', class: "point", part: "point", cx: px, cy: py, r: "3.5" }))));
+    }
+};
+IndXyPoint.style = xyPointCss();
+
+exports.ind_xy_point = IndXyPoint;
+//# sourceMappingURL=ind-xy-point.entry.cjs.js.map
+
+//# sourceMappingURL=ind-xy-point.cjs.entry.js.map

package/dist/cjs/ind-xy-point.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ind-xy-point.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/atoms/xy-point/xy-point.css?tag=ind-xy-point&encapsulation=shadow","src/components/atoms/xy-point/xy-point.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: var(--ind-xy-size, 120px);\n  height: var(--ind-xy-size, 120px);\n  --_accent: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n}\n\n:host([variant=\"running\"]) { --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([variant=\"warning\"])  { --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([variant=\"fault\"])    { --_accent: var(--ind-state-fault-bg, #dc2626); }\n\n.plot {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.field {\n  fill: var(--ind-surface-sunken, light-dark(#fff, #000));\n  stroke: var(--ind-surface-border-default, #2a3340);\n  stroke-width: 1;\n  vector-effect: non-scaling-stroke;\n}\n\n.axis {\n  stroke: var(--ind-surface-border-subtle, #2a3340);\n  stroke-width: 1;\n  stroke-dasharray: 2 2;\n  vector-effect: non-scaling-stroke;\n}\n\n.trail {\n  fill: none;\n  stroke: color-mix(in srgb, var(--_accent) 50%, transparent);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n  vector-effect: non-scaling-stroke;\n}\n\n.point {\n  fill: var(--_accent);\n  stroke: var(--ind-surface-panel, #11161c);\n  stroke-width: 1.5;\n  transition: cx var(--ind-motion-duration-base, 200ms) ease, cy var(--ind-motion-duration-base, 200ms) ease;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .point { transition: none; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type XyVariant = 'default' | 'running' | 'warning' | 'fault';\n\n@Component({\n  tag: 'ind-xy-point',\n  styleUrl: 'xy-point.css',\n  shadow: true,\n})\nexport class IndXyPoint {\n  /** X value of the operating point. */\n  @Prop() x: number = 0;\n  /** Y value of the operating point. */\n  @Prop() y: number = 0;\n  /** X axis bounds. */\n  @Prop() xMin: number = 0;\n  @Prop() xMax: number = 100;\n  /** Y axis bounds. */\n  @Prop() yMin: number = 0;\n  @Prop() yMax: number = 100;\n  /** Optional trail of past points, oldest → newest, as [x, y] pairs. Pass as a property. */\n  @Prop() trail: [number, number][] = [];\n  /** Color intent of the point. */\n  @Prop({ reflect: true }) variant: XyVariant = 'default';\n  /** Accessible label. */\n  @Prop() label?: string;\n\n  private readonly w = 100;\n  private readonly hh = 100;\n\n  private mapX(v: number): number {\n    const span = this.xMax - this.xMin || 1;\n    return ((v - this.xMin) / span) * this.w;\n  }\n  private mapY(v: number): number {\n    const span = this.yMax - this.yMin || 1;\n    return this.hh - ((v - this.yMin) / span) * this.hh;\n  }\n\n  render() {\n    const px = this.mapX(this.x);\n    const py = this.mapY(this.y);\n    const trailPath = (this.trail ?? [])\n      .map((p, i) => `${i === 0 ? 'M' : 'L'}${this.mapX(p[0]).toFixed(1)},${this.mapY(p[1]).toFixed(1)}`)\n      .join(' ');\n    return (\n      <Host role=\"img\" aria-label={this.label ?? `operating point x ${this.x}, y ${this.y}`}>\n        <svg class=\"plot\" part=\"plot\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <rect class=\"field\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" />\n          <line class=\"axis\" x1=\"0\" y1=\"50\" x2=\"100\" y2=\"50\" />\n          <line class=\"axis\" x1=\"50\" y1=\"0\" x2=\"50\" y2=\"100\" />\n          {trailPath && <path class=\"trail\" part=\"trail\" d={trailPath} />}\n          <circle class=\"point\" part=\"point\" cx={px} cy={py} r=\"3.5\" />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/{index-ph7ZTjuY.js → index-BLwLw5-d.js}

@@ -406,6 +406,13 @@ var h = (nodeName, vnodeData, ...children) => {
       }
     }
   }
+  if (typeof nodeName === "function") {
+    return nodeName(
+      vnodeData === null ? {} : vnodeData,
+      vNodeChildren,
+      vdomFnUtils
+    );
+  }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
   if (vNodeChildren.length > 0) {
@@ -435,6 +442,36 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
+var vdomFnUtils = {
+  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
+};
+var convertToPublic = (node) => ({
+  vattrs: node.$attrs$,
+  vchildren: node.$children$,
+  vkey: node.$key$,
+  vname: node.$name$,
+  vtag: node.$tag$,
+  vtext: node.$text$
+});
+var convertToPrivate = (node) => {
+  if (typeof node.vtag === "function") {
+    const vnodeData = { ...node.vattrs };
+    if (node.vkey) {
+      vnodeData.key = node.vkey;
+    }
+    if (node.vname) {
+      vnodeData.name = node.vname;
+    }
+    return h(node.vtag, vnodeData, ...node.vchildren || []);
+  }
+  const vnode = newVNode(node.vtag, node.vtext);
+  vnode.$attrs$ = node.vattrs;
+  vnode.$children$ = node.vchildren;
+  vnode.$key$ = node.vkey;
+  vnode.$name$ = node.vname;
+  return vnode;
+};
 
 // src/runtime/normalize-watchers.ts
 var normalizeWatchers = (raw) => {
@@ -1633,6 +1670,6 @@ exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
-//# sourceMappingURL=index-ph7ZTjuY.js.map
+//# sourceMappingURL=index-BLwLw5-d.js.map
 
-//# sourceMappingURL=index-ph7ZTjuY.js.map
+//# sourceMappingURL=index-BLwLw5-d.js.map