@ind-ds/core 0.1.1 → 0.2.0

package/dist/esm/ind-equipment-status-card.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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 equipmentStatusCardCss = () => `.body{display:flex;align-items:center;gap:var(--ind-spacing-5, 12px)}.symbol{display:inline-flex;flex:0 0 auto}.status{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);margin-left:auto}.state-label{font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-semibold, 600)}:host([state="running"]) .state-label{color:var(--ind-state-running-bg, #16a34a)}:host([state="fault"]) .state-label{color:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]) .state-label{color:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]) .state-label{color:var(--ind-state-maintenance-bg, #2563eb)}:host([state="stopped"]) .state-label{color:var(--ind-surface-text-secondary)}:host([state="unknown"]) .state-label{color:var(--ind-surface-text-muted)}`;
+
+const DEFAULT_LABEL = {
+    running: 'Running',
+    stopped: 'Stopped',
+    fault: 'Fault',
+    warning: 'Warning',
+    maintenance: 'Maintenance',
+    unknown: '—',
+};
+const IndEquipmentStatusCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Equipment name (e.g. "Feed pump"). */
+    heading;
+    /** Equipment tag (e.g. "P-101"). */
+    tag;
+    /** Process state — drives the badge color and fault chrome. */
+    state = 'unknown';
+    /** Override the default state label. */
+    stateLabel;
+    /** Sub-line for context (runtime, last fault, …). */
+    detail;
+    render() {
+        const label = this.stateLabel ?? DEFAULT_LABEL[this.state];
+        const dot = this.state === 'unknown' ? 'neutral' : this.state;
+        return (h(Host, { key: '50ef02041e1221b96bb57907725bf22cc5e0d609', role: "group", "aria-label": `${this.heading}: ${label}`, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("div", { key: 'b173cac3ff0f2f10ff25e461aa1016ffe2952e2d', class: "card-head" }, h("span", { key: '53f425c3d75617add7807f77dd411f0ed1cd1b80', class: "card-title", part: "heading" }, this.heading), this.tag && h("span", { key: '1bcdbdaaaffc476ffb5f99a4d1c248b37f428c9a', class: "card-tag", part: "tag" }, this.tag)), h("div", { key: '75b94da1c391f16ebfa6ed3468f98d9a42b1be8d', class: "body", part: "body" }, h("span", { key: '684412e91904a96e24cce09c8003cf87b3b47fb1', class: "symbol", part: "symbol" }, h("slot", { key: '398342832c19ddd39cd59d3e30b8c057d939d7d1' })), h("div", { key: '6b26f6e32e85949ffa226c522be010693fcfa868', class: "status", part: "status" }, h("ind-status-dot", { key: '0c9e97b62ef0435e8ebe0889fdfde5822506eb4c', state: dot, size: "md" }), h("span", { key: '6a0506b7ab72f4b3f2b28c6bd5210062b77d9594', class: "state-label", part: "state-label" }, label))), this.detail && h("div", { key: 'e7993508dabe25207fc675182bac2034263f775b', class: "card-detail", part: "detail" }, this.detail)));
+    }
+};
+IndEquipmentStatusCard.style = cardCss() + equipmentStatusCardCss();
+
+export { IndEquipmentStatusCard as ind_equipment_status_card };
+//# sourceMappingURL=ind-equipment-status-card.entry.js.map
+
+//# sourceMappingURL=ind-equipment-status-card.entry.js.map

package/dist/esm/ind-equipment-status-card.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-equipment-status-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-equipment-status-card&encapsulation=shadow","src/components/molecules/equipment-status-card/equipment-status-card.css?tag=ind-equipment-status-card&encapsulation=shadow","src/components/molecules/equipment-status-card/equipment-status-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",".body {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-5, 12px);\n}\n\n.symbol {\n  display: inline-flex;\n  flex: 0 0 auto;\n}\n\n.status {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  margin-left: auto;\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:host([state=\"running\"])     .state-label { color: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"fault\"])       .state-label { color: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"])     .state-label { color: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) .state-label { color: var(--ind-state-maintenance-bg, #2563eb); }\n:host([state=\"stopped\"])     .state-label { color: var(--ind-surface-text-secondary); }\n:host([state=\"unknown\"])     .state-label { color: var(--ind-surface-text-muted); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EquipmentCardState =\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'unknown';\n\nconst DEFAULT_LABEL: Record<EquipmentCardState, string> = {\n  running: 'Running',\n  stopped: 'Stopped',\n  fault: 'Fault',\n  warning: 'Warning',\n  maintenance: 'Maintenance',\n  unknown: '—',\n};\n\n/**\n * Generic equipment status card. Slot a process symbol (`<ind-pump>`,\n * `<ind-motor>`, …) into the default slot; the card supplies the heading,\n * a state badge and an optional detail line.\n */\n@Component({\n  tag: 'ind-equipment-status-card',\n  styleUrls: ['../_shared/card.css', 'equipment-status-card.css'],\n  shadow: true,\n})\nexport class IndEquipmentStatusCard {\n  /** Equipment name (e.g. \"Feed pump\"). */\n  @Prop() heading!: string;\n  /** Equipment tag (e.g. \"P-101\"). */\n  @Prop() tag?: string;\n  /** Process state — drives the badge color and fault chrome. */\n  @Prop({ reflect: true }) state: EquipmentCardState = 'unknown';\n  /** Override the default state label. */\n  @Prop() stateLabel?: string;\n  /** Sub-line for context (runtime, last fault, …). */\n  @Prop() detail?: string;\n\n  render() {\n    const label = this.stateLabel ?? DEFAULT_LABEL[this.state];\n    const dot = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${this.heading}: ${label}`}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"heading\">{this.heading}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <span class=\"symbol\" part=\"symbol\"><slot /></span>\n          <div class=\"status\" part=\"status\">\n            <ind-status-dot state={dot as any} size=\"md\" />\n            <span class=\"state-label\" part=\"state-label\">{label}</span>\n          </div>\n        </div>\n        {this.detail && <div class=\"card-detail\" part=\"detail\">{this.detail}</div>}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,sBAAsB,GAAG,MAAM,CAAC,4wBAA4wB,CAAC;;ACUnzB,MAAM,aAAa,GAAuC;AACxD,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,OAAO,EAAE,GAAG;CACb;MAYY,sBAAsB,GAAA,MAAA;;;;;AAEzB,IAAA,OAAO;;AAEP,IAAA,GAAG;;IAEc,KAAK,GAAuB,SAAS;;AAEtD,IAAA,UAAU;;AAEV,IAAA,MAAM;IAEd,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1D,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,KAAK;QAC7D,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,OAAO,EAAA,YAAA,EACA,CAAA,EAAG,IAAI,CAAC,OAAO,CAAA,EAAA,EAAK,KAAK,CAAA,CAAE,EAAA,WAAA,EAC5B,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,WAAW,GAAG,QAAQ,EAAA,EAE1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC5D,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CAAO,EAClD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/B,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,GAAU,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EAC/C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAA,EAAE,KAAK,CAAQ,CACvD,CACF,EACL,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,CACrE;;;;;;;"}

package/dist/esm/ind-estop.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+
+const estopCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);--_size:56px}:host([size="sm"]){--_size:40px}:host([size="lg"]){--_size:80px}.btn{appearance:none;border:none;background:none;padding:0;cursor:pointer;line-height:0}.btn:disabled{cursor:not-allowed;opacity:0.5}.ring{display:inline-flex;align-items:center;justify-content:center;width:var(--_size);height:var(--_size);border-radius:50%;background:radial-gradient(circle at 50% 40%, #ffd400, #d9a900);box-shadow:0 2px 6px rgba(0, 0, 0, 0.5)}.mushroom{display:block;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle at 35% 30%, #ff5a52, #c1121f 70%);box-shadow:inset 0 -3px 6px rgba(0, 0, 0, 0.5),     inset 0 2px 4px rgba(255, 255, 255, 0.4);transition:transform var(--ind-motion-duration-fast, 120ms) ease, box-shadow var(--ind-motion-duration-fast, 120ms) ease}:host([engaged]) .mushroom{transform:scale(0.86);box-shadow:inset 0 -1px 3px rgba(0, 0, 0, 0.6),     0 0 0 3px color-mix(in srgb, #c1121f 50%, transparent)}.btn:focus-visible .ring{outline:3px solid var(--ind-surface-focus-ring, #67e8f9);outline-offset:3px}.caption{font-size:var(--ind-font-size-xs, 10px);font-weight:var(--ind-font-weight-bold, 700);letter-spacing:0.04em;color:var(--ind-state-fault-bg, #dc2626);text-align:center}@media (prefers-reduced-motion: reduce){.mushroom{transition:none}}`;
+
+const IndEstop = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indActivate = createEvent(this, "indActivate");
+        this.indReset = createEvent(this, "indReset");
+    }
+    /** Whether the mushroom button is latched (pressed/engaged). */
+    engaged = false;
+    /** Disabled. */
+    disabled = false;
+    /** Size. */
+    size = 'md';
+    /** Visible caption. Defaults to "EMERGENCY STOP". */
+    label;
+    /** Fires when pressed to engage the stop. */
+    indActivate;
+    /** Fires when reset (twist-release) from an engaged state. */
+    indReset;
+    press = () => {
+        if (this.disabled)
+            return;
+        if (this.engaged) {
+            this.engaged = false;
+            this.indReset.emit();
+        }
+        else {
+            this.engaged = true;
+            this.indActivate.emit();
+        }
+    };
+    render() {
+        const caption = this.label ?? 'EMERGENCY STOP';
+        return (h(Host, { key: '1d89daec6d582afdf9a80afab71bd74fa581b9fb' }, h("button", { key: 'e143f5cdcbf6128f14aa2be18d9e14484dc6848f', type: "button", class: "btn", part: "button", "aria-pressed": this.engaged ? 'true' : 'false', "aria-label": `${caption}${this.engaged ? ' — engaged' : ''}`, disabled: this.disabled, onClick: this.press }, h("span", { key: '4080a0c05c0c0519aace4f85c1855d873bd5e98e', class: "ring", part: "ring" }, h("span", { key: '74ee36092a5d05adceded87b76276b245c191010', class: "mushroom", part: "mushroom" }))), h("span", { key: '1e055f18d1b651c7ebb7a86085976f54ffbf2787', class: "caption", part: "caption" }, caption)));
+    }
+};
+IndEstop.style = estopCss();
+
+export { IndEstop as ind_estop };
+//# sourceMappingURL=ind-estop.entry.js.map
+
+//# sourceMappingURL=ind-estop.entry.js.map

package/dist/esm/ind-estop.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-estop.entry.js","sources":["src/components/atoms/estop/estop.css?tag=ind-estop&encapsulation=shadow","src/components/atoms/estop/estop.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  --_size: 56px;\n}\n\n:host([size=\"sm\"]) { --_size: 40px; }\n:host([size=\"lg\"]) { --_size: 80px; }\n\n.btn {\n  appearance: none;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  line-height: 0;\n}\n\n.btn:disabled { cursor: not-allowed; opacity: 0.5; }\n\n.ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--_size);\n  height: var(--_size);\n  border-radius: 50%;\n  background: radial-gradient(circle at 50% 40%, #ffd400, #d9a900);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);\n}\n\n.mushroom {\n  display: block;\n  width: 72%;\n  height: 72%;\n  border-radius: 50%;\n  background: radial-gradient(circle at 35% 30%, #ff5a52, #c1121f 70%);\n  box-shadow:\n    inset 0 -3px 6px rgba(0, 0, 0, 0.5),\n    inset 0 2px 4px rgba(255, 255, 255, 0.4);\n  transition: transform var(--ind-motion-duration-fast, 120ms) ease, box-shadow var(--ind-motion-duration-fast, 120ms) ease;\n}\n\n:host([engaged]) .mushroom {\n  transform: scale(0.86);\n  box-shadow:\n    inset 0 -1px 3px rgba(0, 0, 0, 0.6),\n    0 0 0 3px color-mix(in srgb, #c1121f 50%, transparent);\n}\n\n.btn:focus-visible .ring {\n  outline: 3px solid var(--ind-surface-focus-ring, #67e8f9);\n  outline-offset: 3px;\n}\n\n.caption {\n  font-size: var(--ind-font-size-xs, 10px);\n  font-weight: var(--ind-font-weight-bold, 700);\n  letter-spacing: 0.04em;\n  color: var(--ind-state-fault-bg, #dc2626);\n  text-align: center;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .mushroom { transition: none; }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type EstopSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-estop',\n  styleUrl: 'estop.css',\n  shadow: true,\n})\nexport class IndEstop {\n  /** Whether the mushroom button is latched (pressed/engaged). */\n  @Prop({ mutable: true, reflect: true }) engaged: boolean = false;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Size. */\n  @Prop({ reflect: true }) size: EstopSize = 'md';\n  /** Visible caption. Defaults to \"EMERGENCY STOP\". */\n  @Prop() label?: string;\n\n  /** Fires when pressed to engage the stop. */\n  @Event() indActivate!: EventEmitter<void>;\n  /** Fires when reset (twist-release) from an engaged state. */\n  @Event() indReset!: EventEmitter<void>;\n\n  private press = () => {\n    if (this.disabled) return;\n    if (this.engaged) {\n      this.engaged = false;\n      this.indReset.emit();\n    } else {\n      this.engaged = true;\n      this.indActivate.emit();\n    }\n  };\n\n  render() {\n    const caption = this.label ?? 'EMERGENCY STOP';\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"btn\"\n          part=\"button\"\n          aria-pressed={this.engaged ? 'true' : 'false'}\n          aria-label={`${caption}${this.engaged ? ' — engaged' : ''}`}\n          disabled={this.disabled}\n          onClick={this.press}\n        >\n          <span class=\"ring\" part=\"ring\">\n            <span class=\"mushroom\" part=\"mushroom\" />\n          </span>\n        </button>\n        <span class=\"caption\" part=\"caption\">{caption}</span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,m6CAAm6C,CAAC;;MCS/6C,QAAQ,GAAA,MAAA;;;;;;;IAEqB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;IAEzB,IAAI,GAAc,IAAI;;AAEvC,IAAA,KAAK;;AAGJ,IAAA,WAAW;;AAEX,IAAA,QAAQ;IAET,KAAK,GAAG,MAAK;QACnB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;aACf;AACL,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;;AAE3B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,gBAAgB;AAC9C,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAAA,YAAA,EACjC,GAAG,OAAO,CAAA,EAAG,IAAI,CAAC,OAAO,GAAG,YAAY,GAAG,EAAE,CAAA,CAAE,EAC3D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAA,EAEnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAA,CAAG,CACpC,CACA,EACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAQ,CAChD;;;;;;;"}

package/dist/esm/ind-event-journal.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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 eventJournalCss = () => `:host{min-width:420px}.panel-list{max-height:420px}.filter{font-family:var(--ind-font-family-sans);font-size:var(--ind-font-size-sm, 11px);background:var(--ind-surface-sunken);color:var(--ind-surface-text-primary);border:1px solid var(--ind-surface-border-default);border-radius:var(--ind-radius-sm, 2px);padding:3px 6px}`;
+
+const IndEventJournal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    heading = 'Event journal';
+    /** Events, most-recent first. */
+    events = [];
+    /** Active severity filter — `all` shows everything. */
+    filter = 'all';
+    onFilter = (e) => {
+        this.filter = e.target.value;
+    };
+    render() {
+        const rows = this.filter === 'all' ? this.events : this.events.filter((e) => e.severity === this.filter);
+        return (h(Host, { key: '929ed5552330cf00cd4d19d634d28084f620e45a' }, h("div", { key: 'cda7f696c5979c7d43bb5fe820e91bb906e4056f', class: "panel-head" }, h("span", { key: '5c60680f7f033917b8c39fa2c9735a0587632ead', class: "panel-title", part: "heading" }, this.heading), h("div", { key: 'de0dec2492782802de3b62a7542b34fa47d61a75', class: "panel-actions" }, h("select", { key: '6b9d2b537af2b4e5d8ed50ff0cd1242f29a20c6d', class: "filter", part: "filter", onChange: this.onFilter }, h("option", { key: 'b86227a678a5851e6dd859f2acb38c9a763c8c56', value: "all" }, "All severities"), h("option", { key: '7f2f904e5d13783b45d42a53d4df66ce07064913', value: "error" }, "Error"), h("option", { key: '545575b6488b207f90c2dc392cb6eb323e36dcdc', value: "warning" }, "Warning"), h("option", { key: 'de94ee66b3d5fc73d63ddea1f96e313a67fedbd9', value: "success" }, "Success"), h("option", { key: '25d7721fb074f259851800252eb5c1f5675a6ae5', value: "info" }, "Info")))), h("div", { key: 'e10810c54e731d3b99bf337134ac3775332d8055', class: "panel-list", part: "list" }, rows.length === 0 ? (h("div", { class: "panel-empty" }, "No events")) : (rows.map((e, i) => (h("ind-event-row", { key: i, time: e.time, severity: e.severity, source: e.source, message: e.message })))))));
+    }
+};
+IndEventJournal.style = panelCss() + eventJournalCss();
+
+export { IndEventJournal as ind_event_journal };
+//# sourceMappingURL=ind-event-journal.entry.js.map
+
+//# sourceMappingURL=ind-event-journal.entry.js.map

package/dist/esm/ind-event-journal.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-event-journal.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-event-journal&encapsulation=shadow","src/components/organisms/event-journal/event-journal.css?tag=ind-event-journal&encapsulation=shadow","src/components/organisms/event-journal/event-journal.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n  display: flex;\n  flex-direction: column;\n  background: var(--ind-surface-panel);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-md, 3px);\n  font-family: var(--ind-font-family-sans);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  box-sizing: border-box;\n  overflow: hidden;\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  background: var(--ind-surface-raised);\n  flex: 0 0 auto;\n}\n\n.panel-titles {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.panel-title {\n  font-size: var(--ind-font-size-md, 13px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  line-height: 1.2;\n}\n\n.panel-subtitle {\n  font-size: var(--ind-font-size-xs, 10px);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n  min-height: 0;\n}\n\n.panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n  border-bottom: 1px solid var(--ind-surface-border-subtle);\n  flex: 0 0 auto;\n}\n\n.panel-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n.panel-grid {\n  display: grid;\n  gap: var(--ind-spacing-4, 8px);\n  padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n  padding: var(--ind-spacing-7, 20px);\n  text-align: center;\n  color: var(--ind-surface-text-muted);\n  font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n  flex: 1 1 auto;\n}\n",":host {\n  min-width: 420px;\n}\n\n.panel-list {\n  max-height: 420px;\n}\n\n.filter {\n  font-family: var(--ind-font-family-sans);\n  font-size: var(--ind-font-size-sm, 11px);\n  background: var(--ind-surface-sunken);\n  color: var(--ind-surface-text-primary);\n  border: 1px solid var(--ind-surface-border-default);\n  border-radius: var(--ind-radius-sm, 2px);\n  padding: 3px 6px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EventSeverity } from '../../molecules/event-row/event-row';\n\nexport interface EventJournalItem {\n  time?: string;\n  severity: EventSeverity;\n  source?: string;\n  message: string;\n}\n\n/**\n * Chronological event / system log built from `<ind-event-row>`s, with a\n * severity filter in the toolbar.\n */\n@Component({\n  tag: 'ind-event-journal',\n  styleUrls: ['../_shared/panel.css', 'event-journal.css'],\n  shadow: true,\n})\nexport class IndEventJournal {\n  @Prop() heading: string = 'Event journal';\n  /** Events, most-recent first. */\n  @Prop() events: EventJournalItem[] = [];\n  /** Active severity filter — `all` shows everything. */\n  @Prop({ mutable: true }) filter: 'all' | EventSeverity = 'all';\n\n  private onFilter = (e: Event) => {\n    this.filter = (e.target as HTMLSelectElement).value as 'all' | EventSeverity;\n  };\n\n  render() {\n    const rows = this.filter === 'all' ? this.events : this.events.filter((e) => e.severity === this.filter);\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n          <div class=\"panel-actions\">\n            <select class=\"filter\" part=\"filter\" onChange={this.onFilter}>\n              <option value=\"all\">All severities</option>\n              <option value=\"error\">Error</option>\n              <option value=\"warning\">Warning</option>\n              <option value=\"success\">Success</option>\n              <option value=\"info\">Info</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"panel-list\" part=\"list\">\n          {rows.length === 0 ? (\n            <div class=\"panel-empty\">No events</div>\n          ) : (\n            rows.map((e, i) => (\n              <ind-event-row\n                key={i}\n                time={e.time}\n                severity={e.severity}\n                source={e.source}\n                message={e.message}\n              />\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,eAAe,GAAG,MAAM,CAAC,iUAAiU,CAAC;;MCmBpV,eAAe,GAAA,MAAA;;;;IAClB,OAAO,GAAW,eAAe;;IAEjC,MAAM,GAAuB,EAAE;;IAEd,MAAM,GAA0B,KAAK;AAEtD,IAAA,QAAQ,GAAG,CAAC,CAAQ,KAAI;QAC9B,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,MAA4B,CAAC,KAA8B;AAC9E,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,KAAK,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,MAAM,CAAC;AACxG,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC9D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAC1D,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,KAAK,EAAA,EAAA,gBAAA,CAAwB,EAC3C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,OAAO,EAAA,EAAA,OAAA,CAAe,EACpC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,EACxC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,SAAS,EAAA,EAAA,SAAA,CAAiB,EACxC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,MAAM,EAAA,EAAA,MAAA,CAAc,CAC3B,CACL,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EAChC,IAAI,CAAC,MAAM,KAAK,CAAC,IAChB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EAAA,WAAA,CAAgB,KAExC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACZ,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,MAAM,EAAE,CAAC,CAAC,MAAM,EAChB,OAAO,EAAE,CAAC,CAAC,OAAO,EAAA,CAClB,CACH,CAAC,CACH,CACG,CACD;;;;;;;"}

package/dist/esm/ind-event-row.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.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 eventRowCss = () => `:host{grid-template-columns:auto 12px auto 1fr}`;
+
+const IndEventRow = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Pre-formatted timestamp. */
+    time;
+    /** Severity — drives the status dot color. */
+    severity = 'info';
+    /** Event source (subsystem, device, tag). */
+    source;
+    /** Event message. */
+    message;
+    render() {
+        return (h(Host, { key: 'f0c8397e9f18441b1720612d4413d7438174f41f', role: "row", "aria-label": `${this.severity} event ${this.message}` }, this.time && h("span", { key: '0abc4554ac569b3c654cb1d56a7892af1770a26e', class: "time", part: "time" }, this.time), h("ind-status-dot", { key: '0c0dd551e50498854cb05a4356581c734bf5b3cd', state: this.severity, size: "sm" }), this.source && h("span", { key: 'fdb8f001ee894c60c114bbb0c750d22057c1aaa0', class: "tag", part: "source" }, this.source), h("span", { key: '61f1b238ffe9bc9d0ac5911145b6b66691747a06', class: "msg", part: "message" }, this.message)));
+    }
+};
+IndEventRow.style = rowCss() + eventRowCss();
+
+export { IndEventRow as ind_event_row };
+//# sourceMappingURL=ind-event-row.entry.js.map
+
+//# sourceMappingURL=ind-event-row.entry.js.map

package/dist/esm/ind-event-row.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-event-row.entry.js","sources":["src/components/molecules/_shared/row.css?tag=ind-event-row&encapsulation=shadow","src/components/molecules/event-row/event-row.css?tag=ind-event-row&encapsulation=shadow","src/components/molecules/event-row/event-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 12px auto 1fr;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EventSeverity = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * One line in an event / system log: timestamp, severity dot, source and\n * message. Read-only.\n */\n@Component({\n  tag: 'ind-event-row',\n  styleUrls: ['../_shared/row.css', 'event-row.css'],\n  shadow: true,\n})\nexport class IndEventRow {\n  /** Pre-formatted timestamp. */\n  @Prop() time?: string;\n  /** Severity — drives the status dot color. */\n  @Prop({ reflect: true }) severity: EventSeverity = 'info';\n  /** Event source (subsystem, device, tag). */\n  @Prop() source?: string;\n  /** Event message. */\n  @Prop() message!: string;\n\n  render() {\n    return (\n      <Host role=\"row\" aria-label={`${this.severity} event ${this.message}`}>\n        {this.time && <span class=\"time\" part=\"time\">{this.time}</span>}\n        <ind-status-dot state={this.severity} size=\"sm\" />\n        {this.source && <span class=\"tag\" part=\"source\">{this.source}</span>}\n        <span class=\"msg\" part=\"message\">{this.message}</span>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAM,GAAG,MAAM,CAAC,iyBAAiyB,CAAC;;ACAxzB,MAAM,WAAW,GAAG,MAAM,CAAC,+CAA+C,CAAC;;MCa9D,WAAW,GAAA,MAAA;;;;;AAEd,IAAA,IAAI;;IAEa,QAAQ,GAAkB,MAAM;;AAEjD,IAAA,MAAM;;AAEN,IAAA,OAAO;IAEf,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,CAAA,CAAE,EAAA,EAClE,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,EAC/D,CAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EACjD,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,EACpE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACjD;;;;;;;"}

package/dist/esm/ind-fan.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const equipmentCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:48px;--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="md"]){--_w:48px}:host([size="lg"]){--_w:72px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80);--_fill:var(--ind-state-running-bg, #16a34a);--_accent:var(--ind-state-running-bg, #16a34a)}:host([state="stopped"]){--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171);--_fill:var(--ind-state-fault-bg, #dc2626);--_accent:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-warning-bg, #f59e0b);--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa);--_fill:var(--ind-state-maintenance-bg, #2563eb);--_accent:var(--ind-state-maintenance-bg, #2563eb)}.symbol{display:block;width:var(--_w);height:auto;overflow:visible}.body{fill:color-mix(in srgb, var(--_fill) 22%, transparent);stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.accent{fill:var(--_accent);stroke:none}.stroke{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.tag{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px)}@media (prefers-reduced-motion: reduce){.spin,.pulse{animation:none !important}}`;
+
+const fanCss = () => `.hub{fill:var(--_stroke)}:host([state="running"]) .spin{animation:ind-fan-spin 0.9s linear infinite}@keyframes ind-fan-spin{to{transform:rotate(360deg)}}`;
+
+const IndFan = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Process state. `running` spins the blades. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "FN-301"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'fan';
+        return (h(Host, { key: '05348b06294a71319dbf2ac7bcde6357b1f2ddda', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '8cd4aa8242c8aa5581ec910accf1bd6743307cf6', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: '992d9e08891850d4d68580b6c5abc575738b2e14', class: "body", cx: "24", cy: "24", r: "16" }), h("g", { key: '31c5fe5dbbf268482987e8f672853f1fe7d84e02', class: "spin", style: { transformOrigin: '24px 24px' } }, h("path", { key: '0563126793186c4757fbb48c44305a2037392d7c', class: "accent", d: "M24 24 C30 14, 34 18, 24 24 Z" }), h("path", { key: 'cb14c0e5f38f73ec35a2294ba6ebd8f4344645e3', class: "accent", d: "M24 24 C34 30, 30 34, 24 24 Z" }), h("path", { key: '8cc12dc34bd9123cb543fdcb6e78688493dc5bf2', class: "accent", d: "M24 24 C18 34, 14 30, 24 24 Z" }), h("path", { key: '43c40edef2152d78fb88d32044fa78b08d85c44e', class: "accent", d: "M24 24 C14 18, 18 14, 24 24 Z" })), h("circle", { key: '47925754f8e411ac8f4210d4293ee03350391f9a', class: "hub", cx: "24", cy: "24", r: "2.5" })), (this.tag || this.label) && (h("div", { key: '2da1231dc992891380181bcddceb289eeb9de7cc', class: "caption" }, this.tag && h("span", { key: 'c8638a92c2c5fbdc9956cf2055f8663815b49f74', class: "tag" }, this.tag), this.label && h("span", { key: '12766db2ca33e5d180dd23b1962d1bd12f9bcefa', class: "label" }, this.label)))));
+    }
+};
+IndFan.style = equipmentCss() + fanCss();
+
+export { IndFan as ind_fan };
+//# sourceMappingURL=ind-fan.entry.js.map
+
+//# sourceMappingURL=ind-fan.entry.js.map

package/dist/esm/ind-fan.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-fan.entry.js","sources":["src/components/atoms/_equipment/equipment.css?tag=ind-fan&encapsulation=shadow","src/components/atoms/fan/fan.css?tag=ind-fan&encapsulation=shadow","src/components/atoms/fan/fan.tsx"],"sourcesContent":["/* Shared base styles for ind-ds process-equipment symbols.\n * Referenced via styleUrls alongside each component's own CSS. */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_w: 48px;\n  --_stroke: var(--ind-state-stopped-border, #8390a0);\n  --_fill: var(--ind-state-stopped-bg, #5a6776);\n  --_accent: var(--ind-state-stopped-bg, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"md\"]) { --_w: 48px; }\n:host([size=\"lg\"]) { --_w: 72px; }\n\n:host([state=\"running\"])     { --_stroke: var(--ind-state-running-border, #4ade80); --_fill: var(--ind-state-running-bg, #16a34a); --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"stopped\"])     { --_stroke: var(--ind-state-stopped-border, #8390a0); --_fill: var(--ind-state-stopped-bg, #5a6776); --_accent: var(--ind-state-stopped-bg, #5a6776); }\n:host([state=\"fault\"])       { --_stroke: var(--ind-state-fault-border, #f87171); --_fill: var(--ind-state-fault-bg, #dc2626); --_accent: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"])     { --_stroke: var(--ind-state-warning-border, #fcd34d); --_fill: var(--ind-state-warning-bg, #f59e0b); --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); --_fill: var(--ind-state-maintenance-bg, #2563eb); --_accent: var(--ind-state-maintenance-bg, #2563eb); }\n\n.symbol {\n  display: block;\n  width: var(--_w);\n  height: auto;\n  overflow: visible;\n}\n\n.body {\n  fill: color-mix(in srgb, var(--_fill) 22%, transparent);\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  vector-effect: non-scaling-stroke;\n}\n\n.accent {\n  fill: var(--_accent);\n  stroke: none;\n}\n\n.stroke {\n  fill: none;\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  vector-effect: non-scaling-stroke;\n}\n\n.caption {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  font-size: var(--ind-font-size-xs, 10px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .spin, .pulse { animation: none !important; }\n}\n",".hub {\n  fill: var(--_stroke);\n}\n\n:host([state=\"running\"]) .spin {\n  animation: ind-fan-spin 0.9s linear infinite;\n}\n\n@keyframes ind-fan-spin {\n  to { transform: rotate(360deg); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-fan',\n  styleUrls: ['../_equipment/equipment.css', 'fan.css'],\n  shadow: true,\n})\nexport class IndFan {\n  /** Process state. `running` spins the blades. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"FN-301\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'fan';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"24\" cy=\"24\" r=\"16\" />\n          <g class=\"spin\" style={{ transformOrigin: '24px 24px' }}>\n            <path class=\"accent\" d=\"M24 24 C30 14, 34 18, 24 24 Z\" />\n            <path class=\"accent\" d=\"M24 24 C34 30, 30 34, 24 24 Z\" />\n            <path class=\"accent\" d=\"M24 24 C18 34, 14 30, 24 24 Z\" />\n            <path class=\"accent\" d=\"M24 24 C14 18, 18 14, 24 24 Z\" />\n          </g>\n          <circle class=\"hub\" cx=\"24\" cy=\"24\" r=\"2.5\" />\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ypEAAypE,CAAC;;ACAtrE,MAAM,MAAM,GAAG,MAAM,CAAC,yJAAyJ,CAAC;;MCQnK,MAAM,GAAA,MAAA;;;;;IAEQ,KAAK,GAAmB,SAAS;;IAEjC,IAAI,GAAkB,IAAI;;AAE3C,IAAA,GAAG;;AAEH,IAAA,KAAK;IAEb,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK;AAC5C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACpD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAC9C,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,EAAA,EACrD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,EAAA,CAAG,EACzD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,EAAA,CAAG,EACzD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,EAAA,CAAG,EACzD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,+BAA+B,GAAG,CACvD,EACJ,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,KAAK,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,KAAK,GAAG,CAC1C,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,MACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC/C,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI;;;;;;;"}

package/dist/esm/ind-fill-row.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
 
 const fillRowCss = () => `:host{display:grid;grid-template-columns:max-content minmax(80px, 1.2fr) minmax(160px, 2fr) max-content max-content auto;gap:var(--ind-spacing-4, 8px);align-items:center;padding:var(--ind-spacing-3, 6px) 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)}.tag{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));letter-spacing:0.04em;min-width:32px}.label{font-size:var(--ind-font-size-base, 12px)}.progress{display:block;width:100%}.value{font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-semibold, 600);font-size:var(--ind-font-size-md, 13px);min-width:52px;text-align:right;white-space:nowrap}.severity{font-size:var(--ind-font-size-md, 13px);width:16px;text-align:center;color:var(--ind-feedback-warning-bg, #f59e0b);line-height:1}:host([variant="error"]) .severity{color:var(--ind-feedback-error-bg, #dc2626)}.actions{display:flex;gap:var(--ind-spacing-2, 4px)}::slotted(*){flex-shrink:0}@media (max-width: 640px){:host{grid-template-columns:max-content 1fr;grid-template-rows:auto auto auto}.progress{grid-column:1 / -1}.value,.severity,.actions{grid-column:1 / -1}}`;
 
@@ -21,7 +21,7 @@ const IndFillRow = class {
     /** Render the severity glyph between the value and the actions. */
     severity = false;
     render() {
-        return (h(Host, { key: '58a3405e85cdc048d8efe47d3f4c1c010bc94318' }, this.tag && h("span", { key: 'afe363e1253cbf40db6e9a61001a5654d2b3dfcd', class: "tag", part: "tag" }, this.tag), h("span", { key: '8854993e5011b07756acb62914e3cd8c16e17ea8', class: "label", part: "label" }, this.label), h("ind-progress", { key: '67b5c4f3d210cbf1df3dd3765b9293482e47d040', class: "progress", part: "progress", value: this.value, max: this.max, variant: this.variant, size: "sm" }), h("span", { key: '4bfde6d18d08e3bd8ede25a769b2776a8720a80b', class: "value", part: "value" }, Math.round(this.value), this.unit ? ' ' + this.unit : ''), this.severity && (h("span", { key: 'fd0cf71dd4cae3e5c4404da29e0232e42e6e3642', class: "severity", part: "severity", "aria-hidden": "true" }, "\u26A0")), h("span", { key: '663240206f948685c4235fbb9057450bc0874c0f', class: "actions", part: "actions" }, h("slot", { key: '7c924c36ed5e348bc7262a7c50c0673ce102b8ae' }))));
+        return (h(Host, { key: 'cb80dcf8705dc03c77b6e18541bff34d4d332f51' }, this.tag && h("span", { key: 'd891414706180ae57bf6851a2a0ecab41b645412', class: "tag", part: "tag" }, this.tag), h("span", { key: '956eae765526cf44507c26b3bb4106e807f83b10', class: "label", part: "label" }, this.label), h("ind-progress", { key: '512e89f8f4e0472222b89a17fcbc25537f7f0a30', class: "progress", part: "progress", value: this.value, max: this.max, variant: this.variant, size: "sm" }), h("span", { key: '75126140321428ea001d2ee7403dd539c67261ff', class: "value", part: "value" }, Math.round(this.value), this.unit ? ' ' + this.unit : ''), this.severity && (h("span", { key: '0c163111da1a1217141a17b6fae5798df43a8966', class: "severity", part: "severity", "aria-hidden": "true" }, "\u26A0")), h("span", { key: 'e7b13297ff9c092c13dc17d1fee1c72252571829', class: "actions", part: "actions" }, h("slot", { key: '689279b59b375558bff4032d6a2f60c928fa4744' }))));
     }
 };
 IndFillRow.style = fillRowCss();

package/dist/esm/ind-firmware-update-panel.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.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 firmwareUpdatePanelCss = () => `:host{min-width:300px}ind-progress{width:100%}.versions{display:flex;align-items:center;gap:var(--ind-spacing-5, 12px)}.ver{display:flex;flex-direction:column}.ver-label{font-size:var(--ind-font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.06em;color:var(--ind-surface-text-muted)}.ver-value{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-lg, 14px);font-weight:var(--ind-font-weight-semibold, 600)}.arrow{color:var(--ind-surface-text-muted)}.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-available{color:var(--ind-state-warning-bg, #f59e0b)}.state-up-to-date{color:var(--ind-state-running-bg, #16a34a)}.state-error{color:var(--ind-state-fault-bg, #dc2626)}`;
+
+const STATE_LABEL = {
+    idle: 'Idle',
+    checking: 'Checking…',
+    available: 'Update available',
+    downloading: 'Downloading…',
+    installing: 'Installing…',
+    'up-to-date': 'Up to date',
+    error: 'Update failed',
+};
+const IndFirmwareUpdatePanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indCheck = createEvent(this, "indCheck");
+        this.indInstall = createEvent(this, "indInstall");
+    }
+    heading = 'Firmware';
+    /** Device name. */
+    device;
+    /** Installed version. */
+    currentVersion;
+    /** Available / target version. */
+    targetVersion;
+    /** Update state. */
+    state = 'idle';
+    /** Progress 0–100 % while downloading / installing. */
+    progress = 0;
+    indCheck;
+    indInstall;
+    render() {
+        const busy = this.state === 'downloading' || this.state === 'installing' || this.state === 'checking';
+        const canInstall = this.state === 'available';
+        const progressVariant = this.state === 'error' ? 'error' : 'default';
+        return (h(Host, { key: 'c9cee9fc072636573cfa2119088ab8c602b91ddc' }, h("div", { key: 'b1defe4c2fef4b350cabd879bb68946c7ee90ace', class: "panel-head" }, h("div", { key: 'ce3e01440b4951b9ec350b6205af5dc1baf490c1', class: "panel-titles" }, h("span", { key: '6760bdf61cebbbeaade59e01e0cda543b09ab6d0', class: "panel-title", part: "heading" }, this.heading), this.device && h("span", { key: '0294ac7428cdf439fca758ef1f0ee5b961f87cf7', class: "panel-subtitle" }, this.device)), h("span", { key: 'dd966181fa4ef9272fc277cf9aa23e9f5bbd8d9c', class: `state state-${this.state}`, part: "state" }, STATE_LABEL[this.state])), h("div", { key: 'f19ef00c269639924aa1399ac7e5cf518a341e07', class: "panel-body" }, h("div", { key: '9b88a26c64eaf6b000b5d1a1b22b48869ecb57fc', class: "versions", part: "versions" }, h("div", { key: '29449a45053f0227faefc3d18ba90a1eb6f8d562', class: "ver" }, h("span", { key: 'c6b1baccacf71ccd6e632754ed3975d1813fede7', class: "ver-label" }, "Installed"), h("span", { key: '00a47da41568fad6230f1005c9abd16137850367', class: "ver-value" }, this.currentVersion)), h("span", { key: 'd542f90b0e28cb7f2b647804902f095db680c2de', class: "arrow", "aria-hidden": "true" }, "\u2192"), h("div", { key: 'dd4221c1edcd9cda6325a0c4446acc8f1dc60ba3', class: "ver" }, h("span", { key: 'f90cc2eb98028665402d87596a4f52bcac0eeddc', class: "ver-label" }, "Target"), h("span", { key: 'a2bdb73992f0ea490156679f2d0aca66eaf8ca28', class: "ver-value" }, this.targetVersion ?? '—'))), busy && (h("ind-progress", { key: '9653d04c3a041bf5d5840b80c6fe0fde2fd65551', value: this.progress, max: 100, variant: progressVariant, size: "md", "show-value": true, indeterminate: this.state === 'checking' })), h("ind-command-group", { key: '38daf75517ce16e6ab122c71e3134e5dac789770', label: "Firmware commands" }, h("ind-button", { key: '1027f80e79d2f3cd36eff6f780c7874d14986a06', variant: "default", size: "sm", label: "Check", disabled: busy, onIndActivate: () => this.indCheck.emit() }), h("ind-button", { key: 'e6623303064153b5e600446cc4bfdae9cb79ef01', variant: "primary", size: "sm", label: "Install", disabled: !canInstall, onIndActivate: () => this.indInstall.emit() })))));
+    }
+};
+IndFirmwareUpdatePanel.style = panelCss() + firmwareUpdatePanelCss();
+
+export { IndFirmwareUpdatePanel as ind_firmware_update_panel };
+//# sourceMappingURL=ind-firmware-update-panel.entry.js.map
+
+//# sourceMappingURL=ind-firmware-update-panel.entry.js.map

package/dist/esm/ind-firmware-update-panel.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-firmware-update-panel.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-firmware-update-panel&encapsulation=shadow","src/components/organisms/firmware-update-panel/firmware-update-panel.css?tag=ind-firmware-update-panel&encapsulation=shadow","src/components/organisms/firmware-update-panel/firmware-update-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: 300px;\n}\n\nind-progress {\n  width: 100%;\n}\n\n.versions {\n  display: flex;\n  align-items: center;\n  gap: var(--ind-spacing-5, 12px);\n}\n\n.ver {\n  display: flex;\n  flex-direction: column;\n}\n\n.ver-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.ver-value {\n  font-family: var(--ind-font-family-mono);\n  font-size: var(--ind-font-size-lg, 14px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.arrow {\n  color: var(--ind-surface-text-muted);\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-available { color: var(--ind-state-warning-bg, #f59e0b); }\n.state-up-to-date { color: var(--ind-state-running-bg, #16a34a); }\n.state-error { color: var(--ind-state-fault-bg, #dc2626); }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type FirmwareState =\n  | 'idle'\n  | 'checking'\n  | 'available'\n  | 'downloading'\n  | 'installing'\n  | 'up-to-date'\n  | 'error';\n\nconst STATE_LABEL: Record<FirmwareState, string> = {\n  idle: 'Idle',\n  checking: 'Checking…',\n  available: 'Update available',\n  downloading: 'Downloading…',\n  installing: 'Installing…',\n  'up-to-date': 'Up to date',\n  error: 'Update failed',\n};\n\n/**\n * Firmware update panel: current vs target version, update progress and the\n * Check / Install commands. Emits `indCheck` and `indInstall`.\n */\n@Component({\n  tag: 'ind-firmware-update-panel',\n  styleUrls: ['../_shared/panel.css', 'firmware-update-panel.css'],\n  shadow: true,\n})\nexport class IndFirmwareUpdatePanel {\n  @Prop() heading: string = 'Firmware';\n  /** Device name. */\n  @Prop() device?: string;\n  /** Installed version. */\n  @Prop() currentVersion!: string;\n  /** Available / target version. */\n  @Prop() targetVersion?: string;\n  /** Update state. */\n  @Prop({ reflect: true }) state: FirmwareState = 'idle';\n  /** Progress 0–100 % while downloading / installing. */\n  @Prop() progress: number = 0;\n\n  @Event() indCheck!: EventEmitter<void>;\n  @Event() indInstall!: EventEmitter<void>;\n\n  render() {\n    const busy = this.state === 'downloading' || this.state === 'installing' || this.state === 'checking';\n    const canInstall = this.state === 'available';\n    const progressVariant = this.state === 'error' ? 'error' : '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.device && <span class=\"panel-subtitle\">{this.device}</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          <div class=\"versions\" part=\"versions\">\n            <div class=\"ver\">\n              <span class=\"ver-label\">Installed</span>\n              <span class=\"ver-value\">{this.currentVersion}</span>\n            </div>\n            <span class=\"arrow\" aria-hidden=\"true\">→</span>\n            <div class=\"ver\">\n              <span class=\"ver-label\">Target</span>\n              <span class=\"ver-value\">{this.targetVersion ?? '—'}</span>\n            </div>\n          </div>\n          {busy && (\n            <ind-progress value={this.progress} max={100} variant={progressVariant} size=\"md\" show-value indeterminate={this.state === 'checking'}></ind-progress>\n          )}\n          <ind-command-group label=\"Firmware commands\">\n            <ind-button variant=\"default\" size=\"sm\" label=\"Check\" disabled={busy} onIndActivate={() => this.indCheck.emit()} />\n            <ind-button variant=\"primary\" size=\"sm\" label=\"Install\" disabled={!canInstall} onIndActivate={() => this.indInstall.emit()} />\n          </ind-command-group>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ind-gauge.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const gaugeCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:120px}:host([size="sm"]){--_w:84px}:host([size="md"]){--_w:120px}:host([size="lg"]){--_w:168px}.gauge{width:var(--_w);height:var(--_w);display:block}.track{fill:none;stroke:var(--ind-surface-border-default, #2a3340);stroke-width:8;stroke-linecap:round}.zone{fill:none;stroke-width:8;stroke-linecap:butt}.needle{stroke:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));stroke-width:2.5;stroke-linecap:round;transition:all var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease)}.hub{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5))}.readout{display:inline-flex;align-items:baseline;gap:3px;margin-top:-28%}.number{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-size:var(--ind-font-size-xl, 16px);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}:host([size="lg"]) .number{font-size:var(--ind-font-size-2xl, 20px)}.unit{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-muted, #7a8694)}.label{margin-top:var(--ind-spacing-2, 4px);font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}@media (prefers-reduced-motion: reduce){.needle{transition:none}}`;
+
+const IndGauge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Current value. */
+    value = 0;
+    /** Scale minimum. */
+    min = 0;
+    /** Scale maximum. */
+    max = 100;
+    /** Colored zones along the arc (e.g. green/amber/red bands). Pass as a property. */
+    zones = [];
+    /** Engineering unit. */
+    unit;
+    /** Label / tag rendered under the value. */
+    label;
+    /** Decimal places for the value. */
+    precision;
+    /** Size. */
+    size = 'md';
+    // 270° sweep from 135° (bottom-left) clockwise to 405°/45° (bottom-right).
+    startAngle = 135;
+    sweep = 270;
+    cx = 50;
+    cy = 50;
+    r = 40;
+    valueToAngle(v) {
+        const span = this.max - this.min || 1;
+        const ratio = Math.min(1, Math.max(0, (v - this.min) / span));
+        return this.startAngle + ratio * this.sweep;
+    }
+    polar(angleDeg, radius = this.r) {
+        const a = (angleDeg * Math.PI) / 180;
+        return { x: this.cx + radius * Math.cos(a), y: this.cy + radius * Math.sin(a) };
+    }
+    arc(fromV, toV, radius = this.r) {
+        const a0 = this.valueToAngle(fromV);
+        const a1 = this.valueToAngle(toV);
+        const p0 = this.polar(a0, radius);
+        const p1 = this.polar(a1, radius);
+        const large = a1 - a0 > 180 ? 1 : 0;
+        return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A ${radius} ${radius} 0 ${large} 1 ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;
+    }
+    formatted() {
+        if (!Number.isFinite(this.value))
+            return '--';
+        return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);
+    }
+    render() {
+        const needleAngle = this.valueToAngle(this.value);
+        const tip = this.polar(needleAngle, this.r - 6);
+        const name = this.label ?? 'gauge';
+        return (h(Host, { key: '1dcc7b4a14620e9e67f62b4bb839de1c73c9eb28', role: "meter", "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-label": `${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}` }, h("svg", { key: '835dadb8fe0ffcab0bd4f3dc62d7049a6a9d04dd', class: "gauge", part: "gauge", viewBox: "0 0 100 100", "aria-hidden": "true" }, h("path", { key: '440f32cf9718f31589b1c3320c3e5db538a5aaaf', class: "track", part: "track", d: this.arc(this.min, this.max) }), (this.zones ?? []).map((z) => (h("path", { class: "zone", d: this.arc(z.from, z.to), style: { stroke: z.color } }))), h("line", { key: 'd7d4f7fc4137c2763d3d51f2e33bd4f833e8f349', class: "needle", part: "needle", x1: this.cx, y1: this.cy, x2: tip.x, y2: tip.y }), h("circle", { key: 'f8e497fd70ab2f68f12d867efc41b45e8477ee7e', class: "hub", cx: this.cx, cy: this.cy, r: "3.5" })), h("div", { key: 'e71f4f120c4a8618c54a4287a47e292375a1acad', class: "readout", part: "readout" }, h("span", { key: '7cc72fe3205519521e18eb1cbc9d374101704d2d', class: "number", part: "number" }, this.formatted()), this.unit && h("span", { key: '2309b9b1c009a726af38381e8ad05aa8365f4109', class: "unit", part: "unit" }, this.unit)), this.label && h("span", { key: '2d7c584f453a5006f75d6b5f03af2d1e4a200a59', class: "label", part: "label" }, this.label)));
+    }
+};
+IndGauge.style = gaugeCss();
+
+export { IndGauge as ind_gauge };
+//# sourceMappingURL=ind-gauge.entry.js.map
+
+//# sourceMappingURL=ind-gauge.entry.js.map

package/dist/esm/ind-gauge.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-gauge.entry.js","sources":["src/components/atoms/gauge/gauge.css?tag=ind-gauge&encapsulation=shadow","src/components/atoms/gauge/gauge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_w: 120px;\n}\n\n:host([size=\"sm\"]) { --_w: 84px; }\n:host([size=\"md\"]) { --_w: 120px; }\n:host([size=\"lg\"]) { --_w: 168px; }\n\n.gauge {\n  width: var(--_w);\n  height: var(--_w);\n  display: block;\n}\n\n.track {\n  fill: none;\n  stroke: var(--ind-surface-border-default, #2a3340);\n  stroke-width: 8;\n  stroke-linecap: round;\n}\n\n.zone {\n  fill: none;\n  stroke-width: 8;\n  stroke-linecap: butt;\n}\n\n.needle {\n  stroke: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  stroke-width: 2.5;\n  stroke-linecap: round;\n  transition: all var(--ind-motion-duration-base, 200ms) var(--ind-motion-easing-standard, ease);\n}\n\n.hub {\n  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n}\n\n.readout {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 3px;\n  margin-top: -28%;\n}\n\n.number {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-size: var(--ind-font-size-xl, 16px);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n:host([size=\"lg\"]) .number { font-size: var(--ind-font-size-2xl, 20px); }\n\n.unit { font-size: var(--ind-font-size-xs, 10px); color: var(--ind-surface-text-muted, #7a8694); }\n\n.label {\n  margin-top: var(--ind-spacing-2, 4px);\n  font-size: var(--ind-font-size-xs, 10px);\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .needle { transition: none; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface GaugeZone {\n  from: number;\n  to: number;\n  /** CSS color or a state keyword resolved to a token. */\n  color: string;\n}\n\nexport type GaugeSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-gauge',\n  styleUrl: 'gauge.css',\n  shadow: true,\n})\nexport class IndGauge {\n  /** Current value. */\n  @Prop() value: number = 0;\n  /** Scale minimum. */\n  @Prop() min: number = 0;\n  /** Scale maximum. */\n  @Prop() max: number = 100;\n  /** Colored zones along the arc (e.g. green/amber/red bands). Pass as a property. */\n  @Prop() zones: GaugeZone[] = [];\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Label / tag rendered under the value. */\n  @Prop() label?: string;\n  /** Decimal places for the value. */\n  @Prop() precision?: number;\n  /** Size. */\n  @Prop({ reflect: true }) size: GaugeSize = 'md';\n\n  // 270° sweep from 135° (bottom-left) clockwise to 405°/45° (bottom-right).\n  private readonly startAngle = 135;\n  private readonly sweep = 270;\n  private readonly cx = 50;\n  private readonly cy = 50;\n  private readonly r = 40;\n\n  private valueToAngle(v: number): number {\n    const span = this.max - this.min || 1;\n    const ratio = Math.min(1, Math.max(0, (v - this.min) / span));\n    return this.startAngle + ratio * this.sweep;\n  }\n\n  private polar(angleDeg: number, radius = this.r): { x: number; y: number } {\n    const a = (angleDeg * Math.PI) / 180;\n    return { x: this.cx + radius * Math.cos(a), y: this.cy + radius * Math.sin(a) };\n  }\n\n  private arc(fromV: number, toV: number, radius = this.r): string {\n    const a0 = this.valueToAngle(fromV);\n    const a1 = this.valueToAngle(toV);\n    const p0 = this.polar(a0, radius);\n    const p1 = this.polar(a1, radius);\n    const large = a1 - a0 > 180 ? 1 : 0;\n    return `M ${p0.x.toFixed(2)} ${p0.y.toFixed(2)} A ${radius} ${radius} 0 ${large} 1 ${p1.x.toFixed(2)} ${p1.y.toFixed(2)}`;\n  }\n\n  private formatted(): string {\n    if (!Number.isFinite(this.value)) return '--';\n    return this.precision !== undefined ? this.value.toFixed(this.precision) : String(this.value);\n  }\n\n  render() {\n    const needleAngle = this.valueToAngle(this.value);\n    const tip = this.polar(needleAngle, this.r - 6);\n    const name = this.label ?? 'gauge';\n    return (\n      <Host\n        role=\"meter\"\n        aria-valuenow={this.value}\n        aria-valuemin={this.min}\n        aria-valuemax={this.max}\n        aria-label={`${name}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}`}\n      >\n        <svg class=\"gauge\" part=\"gauge\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <path class=\"track\" part=\"track\" d={this.arc(this.min, this.max)} />\n          {(this.zones ?? []).map((z) => (\n            <path class=\"zone\" d={this.arc(z.from, z.to)} style={{ stroke: z.color }} />\n          ))}\n          <line class=\"needle\" part=\"needle\" x1={this.cx} y1={this.cy} x2={tip.x} y2={tip.y} />\n          <circle class=\"hub\" cx={this.cx} cy={this.cy} r=\"3.5\" />\n        </svg>\n        <div class=\"readout\" part=\"readout\">\n          <span class=\"number\" part=\"number\">{this.formatted()}</span>\n          {this.unit && <span class=\"unit\" part=\"unit\">{this.unit}</span>}\n        </div>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ind-health-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
 
 const healthCardCss = () => `: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));min-width:160px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.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))}.status{display:flex;align-items:center;gap:var(--ind-spacing-3, 6px)}.state-label{font-size:var(--ind-font-size-xl, 16px);font-weight:var(--ind-font-weight-semibold, 600);line-height:1}.detail{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0))}:host([state="running"]) .state-label{color:var(--ind-state-running-bg,     #16a34a)}:host([state="fault"]) .state-label{color:var(--ind-state-fault-bg,       #dc2626)}:host([state="warning"]) .state-label{color:var(--ind-state-warning-bg,     #f59e0b)}:host([state="maintenance"]) .state-label{color:var(--ind-state-maintenance-bg, #2563eb)}:host([state="stopped"]) .state-label{color:var(--ind-surface-text-secondary)}:host([state="unknown"]) .state-label{color:var(--ind-surface-text-muted)}: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)}`;
 
@@ -25,7 +25,7 @@ const IndHealthCard = class {
     render() {
         const label = this.stateLabel ?? DEFAULT_LABEL[this.state];
         const dotState = this.state === 'unknown' ? 'neutral' : this.state;
-        return (h(Host, { key: '2bc1d2152325d8a40fb9399ec6c24b0134bde34a', role: "group", "aria-label": `${this.heading}: ${label}`, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("div", { key: '7268095055dc03a742e97786a22dd4179f6e8ac3', class: "title", part: "title" }, this.heading), h("div", { key: '4069f5782516eb2b28bfafb4b0a59c3fe6133321', class: "status", part: "status" }, h("ind-status-dot", { key: '651976ae059c6b8faafd4bb4de7c1fa08fd6b86b', state: dotState, size: "md" }), h("span", { key: '18925ef8bb2c51789f315a2adf8cacc5a7ad4712', class: "state-label", part: "state-label" }, label)), this.detail && h("div", { key: '7f3c37bca74f5f5fb92633f9c7d85681c78bd677', class: "detail", part: "detail" }, this.detail)));
+        return (h(Host, { key: '8bcd20c7ae26a39c6627aa547ce01d12d53bdb8e', role: "group", "aria-label": `${this.heading}: ${label}`, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("div", { key: 'eee5962658e3ddb193ad613083535b1101cc7770', class: "title", part: "title" }, this.heading), h("div", { key: '2ab1426acd7f2863bb4b2832847b68ff9d0e4d33', class: "status", part: "status" }, h("ind-status-dot", { key: 'b09a658e623532ee3a5b6f72f94e27d01849ef5c', state: dotState, size: "md" }), h("span", { key: '365c3e7a25f850174caa59a7efad2f4df9996946', class: "state-label", part: "state-label" }, label)), this.detail && h("div", { key: '7c35221f76e00d7d0223b3c3e89795ae9a3721ce', class: "detail", part: "detail" }, this.detail)));
     }
 };
 IndHealthCard.style = healthCardCss();

package/dist/esm/ind-heartbeat.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const heartbeatCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ind-spacing-3, 6px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-base, 12px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_size:10px;--_color:var(--ind-state-running-bg, #16a34a);--_period:1000ms}:host([size="sm"]){--_size:8px}:host([size="lg"]){--_size:14px}:host(:not([alive])){--_color:var(--ind-state-fault-bg, #dc2626)}.pulse{position:relative;display:inline-flex;width:var(--_size);height:var(--_size);flex:none}.core{position:absolute;inset:0;margin:auto;width:var(--_size);height:var(--_size);border-radius:50%;background:var(--_color)}.ring{position:absolute;inset:0;border-radius:50%;background:var(--_color);opacity:0}:host([alive]) .ring{animation:ind-heartbeat var(--_period) ease-out infinite}@keyframes ind-heartbeat{0%{transform:scale(1);opacity:0.6}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}@media (prefers-reduced-motion: reduce){.ring{animation:none !important}}`;
+
+const IndHeartbeat = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Whether the monitored source is alive. When false the pulse stops. */
+    alive = true;
+    /** Beat interval in milliseconds (drives the pulse animation period). */
+    interval = 1000;
+    /** Size. */
+    size = 'md';
+    /** Optional label rendered next to the pulse. */
+    label;
+    render() {
+        return (h(Host, { key: '57635f480aa687475404cc5078e5f2ad1bef3522', role: "status", "aria-live": "polite", "aria-label": this.label ?? (this.alive ? 'Heartbeat active' : 'Heartbeat lost'), style: { '--_period': `${Math.max(200, this.interval)}ms` } }, h("span", { key: 'c1a84671caebe2949acb923a666cd9f2318e95a7', class: "pulse", part: "pulse", "aria-hidden": "true" }, h("span", { key: '720ef97105a86565d5aced3d77ada332b6c1ded2', class: "core", part: "core" }), h("span", { key: 'f865735ce0515440a8b1148dbe9a506bbc891cc9', class: "ring", part: "ring" })), this.label && h("span", { key: 'b15159d02b971495987871841848d27c9f21e94c', class: "label", part: "label" }, this.label)));
+    }
+};
+IndHeartbeat.style = heartbeatCss();
+
+export { IndHeartbeat as ind_heartbeat };
+//# sourceMappingURL=ind-heartbeat.entry.js.map
+
+//# sourceMappingURL=ind-heartbeat.entry.js.map

package/dist/esm/ind-heartbeat.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-heartbeat.entry.js","sources":["src/components/atoms/heartbeat/heartbeat.css?tag=ind-heartbeat&encapsulation=shadow","src/components/atoms/heartbeat/heartbeat.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ind-spacing-3, 6px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-base, 12px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_size: 10px;\n  --_color: var(--ind-state-running-bg, #16a34a);\n  --_period: 1000ms;\n}\n\n:host([size=\"sm\"]) { --_size: 8px; }\n:host([size=\"lg\"]) { --_size: 14px; }\n\n:host(:not([alive])) { --_color: var(--ind-state-fault-bg, #dc2626); }\n\n.pulse {\n  position: relative;\n  display: inline-flex;\n  width: var(--_size);\n  height: var(--_size);\n  flex: none;\n}\n\n.core {\n  position: absolute;\n  inset: 0;\n  margin: auto;\n  width: var(--_size);\n  height: var(--_size);\n  border-radius: 50%;\n  background: var(--_color);\n}\n\n.ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: var(--_color);\n  opacity: 0;\n}\n\n:host([alive]) .ring {\n  animation: ind-heartbeat var(--_period) ease-out infinite;\n}\n\n@keyframes ind-heartbeat {\n  0%   { transform: scale(1);   opacity: 0.6; }\n  70%  { transform: scale(2.6); opacity: 0; }\n  100% { transform: scale(2.6); opacity: 0; }\n}\n\n.label { color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2)); }\n\n@media (prefers-reduced-motion: reduce) {\n  .ring { animation: none !important; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeartbeatSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-heartbeat',\n  styleUrl: 'heartbeat.css',\n  shadow: true,\n})\nexport class IndHeartbeat {\n  /** Whether the monitored source is alive. When false the pulse stops. */\n  @Prop({ reflect: true }) alive: boolean = true;\n\n  /** Beat interval in milliseconds (drives the pulse animation period). */\n  @Prop() interval: number = 1000;\n\n  /** Size. */\n  @Prop({ reflect: true }) size: HeartbeatSize = 'md';\n\n  /** Optional label rendered next to the pulse. */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={this.label ?? (this.alive ? 'Heartbeat active' : 'Heartbeat lost')}\n        style={{ '--_period': `${Math.max(200, this.interval)}ms` }}\n      >\n        <span class=\"pulse\" part=\"pulse\" aria-hidden=\"true\">\n          <span class=\"core\" part=\"core\" />\n          <span class=\"ring\" part=\"ring\" />\n        </span>\n        {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,4lCAA4lC,CAAC;;MCS5mC,YAAY,GAAA,MAAA;;;;;IAEE,KAAK,GAAY,IAAI;;IAGtC,QAAQ,GAAW,IAAI;;IAGN,IAAI,GAAkB,IAAI;;AAG3C,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,QAAQ,eACH,QAAQ,EAAA,YAAA,EACN,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,kBAAkB,GAAG,gBAAgB,CAAC,EAC9E,KAAK,EAAE,EAAE,WAAW,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA,EAAA,CAAI,EAAE,EAAA,EAE3D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,EAAA,EACjD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,CAAG,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG,CAC5B,EACN,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D;;;;;;;"}

package/dist/esm/ind-heater.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+
+const equipmentCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:48px;--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="md"]){--_w:48px}:host([size="lg"]){--_w:72px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80);--_fill:var(--ind-state-running-bg, #16a34a);--_accent:var(--ind-state-running-bg, #16a34a)}:host([state="stopped"]){--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171);--_fill:var(--ind-state-fault-bg, #dc2626);--_accent:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-warning-bg, #f59e0b);--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa);--_fill:var(--ind-state-maintenance-bg, #2563eb);--_accent:var(--ind-state-maintenance-bg, #2563eb)}.symbol{display:block;width:var(--_w);height:auto;overflow:visible}.body{fill:color-mix(in srgb, var(--_fill) 22%, transparent);stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.accent{fill:var(--_accent);stroke:none}.stroke{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.tag{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px)}@media (prefers-reduced-motion: reduce){.spin,.pulse{animation:none !important}}`;
+
+const heaterCss = () => `.coil{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}:host([state="running"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-fault-bg, #dc2626)}:host([state="running"]) .coil{stroke:var(--ind-state-fault-bg, #ef4444);animation:ind-heater-glow 1.4s ease-in-out infinite}@keyframes ind-heater-glow{50%{stroke:var(--ind-state-warning-bg, #f59e0b)}}`;
+
+const IndHeater = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Process state. `running` glows the element. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "EH-601"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'heater';
+        return (h(Host, { key: 'd89d4fd8c92b5d580e9a042645f044ad1a1ee292', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '03cd61a0fdcd116f4efa913301a1f16797f3b755', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: '1eb5b9ac742fbc70a137f46a98b036cc74b1a820', class: "body", cx: "24", cy: "24", r: "16" }), h("path", { key: '4e5f078661433f278f0ec6ec7ba9648021b9c237', class: "coil", d: "M14 18 q5 -6 10 0 t10 0 M14 24 q5 -6 10 0 t10 0 M14 30 q5 -6 10 0 t10 0" })), (this.tag || this.label) && (h("div", { key: '9cb689e0d55fe6744948e0c9c3f9d456d6aed084', class: "caption" }, this.tag && h("span", { key: '31ff37c274b8c107ce29982c21c2200bf93d6257', class: "tag" }, this.tag), this.label && h("span", { key: '4fd695b74a6bf03a43a0dd6ee90bb6a167556cc0', class: "label" }, this.label)))));
+    }
+};
+IndHeater.style = equipmentCss() + heaterCss();
+
+export { IndHeater as ind_heater };
+//# sourceMappingURL=ind-heater.entry.js.map
+
+//# sourceMappingURL=ind-heater.entry.js.map

package/dist/esm/ind-heater.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ind-heater.entry.js","sources":["src/components/atoms/_equipment/equipment.css?tag=ind-heater&encapsulation=shadow","src/components/atoms/heater/heater.css?tag=ind-heater&encapsulation=shadow","src/components/atoms/heater/heater.tsx"],"sourcesContent":["/* Shared base styles for ind-ds process-equipment symbols.\n * Referenced via styleUrls alongside each component's own CSS. */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ind-spacing-2, 4px);\n  font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n  font-size: var(--ind-font-size-sm, 11px);\n  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n  --_w: 48px;\n  --_stroke: var(--ind-state-stopped-border, #8390a0);\n  --_fill: var(--ind-state-stopped-bg, #5a6776);\n  --_accent: var(--ind-state-stopped-bg, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"md\"]) { --_w: 48px; }\n:host([size=\"lg\"]) { --_w: 72px; }\n\n:host([state=\"running\"])     { --_stroke: var(--ind-state-running-border, #4ade80); --_fill: var(--ind-state-running-bg, #16a34a); --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"stopped\"])     { --_stroke: var(--ind-state-stopped-border, #8390a0); --_fill: var(--ind-state-stopped-bg, #5a6776); --_accent: var(--ind-state-stopped-bg, #5a6776); }\n:host([state=\"fault\"])       { --_stroke: var(--ind-state-fault-border, #f87171); --_fill: var(--ind-state-fault-bg, #dc2626); --_accent: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"])     { --_stroke: var(--ind-state-warning-border, #fcd34d); --_fill: var(--ind-state-warning-bg, #f59e0b); --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); --_fill: var(--ind-state-maintenance-bg, #2563eb); --_accent: var(--ind-state-maintenance-bg, #2563eb); }\n\n.symbol {\n  display: block;\n  width: var(--_w);\n  height: auto;\n  overflow: visible;\n}\n\n.body {\n  fill: color-mix(in srgb, var(--_fill) 22%, transparent);\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  vector-effect: non-scaling-stroke;\n}\n\n.accent {\n  fill: var(--_accent);\n  stroke: none;\n}\n\n.stroke {\n  fill: none;\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  vector-effect: non-scaling-stroke;\n}\n\n.caption {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.tag {\n  font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n  font-weight: var(--ind-font-weight-semibold, 600);\n  font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n  font-size: var(--ind-font-size-xs, 10px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .spin, .pulse { animation: none !important; }\n}\n",".coil {\n  fill: none;\n  stroke: var(--_stroke);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n  vector-effect: non-scaling-stroke;\n}\n\n:host([state=\"running\"]) {\n  --_stroke: var(--ind-state-warning-border, #fcd34d);\n  --_fill: var(--ind-state-fault-bg, #dc2626);\n}\n:host([state=\"running\"]) .coil {\n  stroke: var(--ind-state-fault-bg, #ef4444);\n  animation: ind-heater-glow 1.4s ease-in-out infinite;\n}\n\n@keyframes ind-heater-glow {\n  50% { stroke: var(--ind-state-warning-bg, #f59e0b); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n  tag: 'ind-heater',\n  styleUrls: ['../_equipment/equipment.css', 'heater.css'],\n  shadow: true,\n})\nexport class IndHeater {\n  /** Process state. `running` glows the element. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Visual size. */\n  @Prop({ reflect: true }) size: EquipmentSize = 'md';\n  /** Equipment tag (e.g. \"EH-601\"). */\n  @Prop() tag?: string;\n  /** Human label. */\n  @Prop() label?: string;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'heater';\n    return (\n      <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n        {/* Heating element: circle with a resistive serpentine. */}\n        <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n          <circle class=\"body\" cx=\"24\" cy=\"24\" r=\"16\" />\n          <path class=\"coil\" d=\"M14 18 q5 -6 10 0 t10 0 M14 24 q5 -6 10 0 t10 0 M14 30 q5 -6 10 0 t10 0\" />\n        </svg>\n        {(this.tag || this.label) && (\n          <div class=\"caption\">\n            {this.tag && <span class=\"tag\">{this.tag}</span>}\n            {this.label && <span class=\"label\">{this.label}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ypEAAypE,CAAC;;ACAtrE,MAAM,SAAS,GAAG,MAAM,CAAC,6aAA6a,CAAC;;MCQ1b,SAAS,GAAA,MAAA;;;;;IAEK,KAAK,GAAmB,SAAS;;IAEjC,IAAI,GAAkB,IAAI;;AAE3C,IAAA,GAAG;;AAEH,IAAA,KAAK;IAEb,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,QAAQ;AAC/C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,GAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAEpD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAC9C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,CAAC,EAAC,yEAAyE,GAAG,CAC7F,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,MACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC/C,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI;;;;;;;"}