@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.110 → 2.0.0-next.111

package/dist/automation/indicator-tank-atmospheric/indicator-tank-atmospheric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-tank-atmospheric.js","sources":["../../../src/automation/indicator-tank-atmospheric/indicator-tank-atmospheric.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport componentStyle from './indicator-tank-atmospheric.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-tank.js';\nimport {\n  IndicatorDirection,\n  LinearIndicatorScheme,\n  Rect,\n  renderLinearBar,\n  renderTrendGraph,\n} from '../indicator-shared/linear-indicator.js';\n\nexport enum IndicatorTankAtmosphericVariant {\n  bar = 'bar',\n  trend = 'trend',\n}\n\nexport enum IndicatorTankAtmosphericValue {\n  regular = 'regular',\n  enhanced = 'enhanced',\n  medium = 'medium',\n}\n\nconst HORIZONTAL_BAR: Rect = {x: 8, y: 11, width: 32, height: 26};\nconst VERTICAL_BAR: Rect = {x: 11, y: 8, width: 26, height: 32};\nconst HORIZONTAL_TREND: Rect = {x: 8, y: 10, width: 32, height: 28};\nconst VERTICAL_TREND: Rect = {x: 10, y: 8, width: 28, height: 32};\n\nconst FRAME_PATH =\n  'M20.5 32.5L4.21259 32.5C3.70663 32.5 3.45364 32.5 3.09178 32.3531C2.84817 32.2542 2.44102 31.9492 2.27758 31.7433C2.0348 31.4373 1.98325 31.2615 1.88017 30.9098C1.29286 28.906 0.5 24.6852 0.5 16.5C0.5 8.31487 1.29286 4.09402 1.88016 2.09025C1.98325 1.73854 2.0348 1.56268 2.27758 1.25676C2.44102 1.0508 2.84817 0.745859 3.09178 0.646944C3.45364 0.500011 3.70662 0.500011 4.21259 0.500011L20.5 0.50001L36.7874 0.500011C37.2934 0.500011 37.5464 0.500011 37.9082 0.646943C38.1518 0.745859 38.559 1.0508 38.7224 1.25675C38.9652 1.56268 39.0167 1.73854 39.1198 2.09025C39.7071 4.09402 40.5 8.31487 40.5 16.5C40.5 24.6851 39.7071 28.906 39.1198 30.9098C39.0167 31.2615 38.9652 31.4373 38.7224 31.7433C38.559 31.9492 38.1518 32.2542 37.9082 32.3531C37.5464 32.5 37.2934 32.5 36.7874 32.5H20.5Z';\n\n/**\n * Compact 48×48 atmospheric tank level indicator.\n *\n * ## Features / Variants\n * - `variant`: `bar` (bottom-up percentage fill) or `trend` (history graph\n *   with a current-value micro-bar)\n * - `direction`: `vertical` or `horizontal` tank outline\n * - `value`: color scheme — `regular`, `enhanced` or `medium`\n * - `level`: current tank level 0–100 (%), drives the fill and micro-bar\n * - `data`: history samples 0–100 (%) drawn as the trend graph\n * - `hasIcon`: centered icon overlay (bar variant only)\n *\n * ## Usage Guidelines\n * Use as an at-a-glance level indicator in dashboards and lists. For a\n * full-featured tank cell with readouts, badges and setpoints, use\n * `obc-automation-tank` instead.\n *\n * ## Best Practices / Constraints\n * - `level` and `data` values are clamped to 0–100; values outside that\n *   range are pinned to the nearest bound.\n * - The `trend` variant needs at least two `data` samples to draw a line;\n *   with fewer it shows only the current-value micro-bar.\n * - The `icon` slot renders only in the `bar` variant; it is ignored in\n *   `trend`.\n * - Display-only: the root SVG is `aria-hidden`; convey tank level to\n *   assistive tech through adjacent text if it is not otherwise available.\n *\n * ## Slots\n * | Slot   | Condition                     | Purpose                        |\n * | ------ | ----------------------------- | ------------------------------ |\n * | `icon` | `hasIcon` and `variant='bar'` | Icon overlay (`obi-*` element) |\n *\n * @slot icon - Centered icon overlay, defaults to `obi-tank`\n */\n@customElement('obc-indicator-tank-atmospheric')\nexport class ObcIndicatorTankAtmospheric extends LitElement {\n  @property({type: String, reflect: true}) direction: IndicatorDirection =\n    IndicatorDirection.vertical;\n  @property({type: String, reflect: true})\n  variant: IndicatorTankAtmosphericVariant =\n    IndicatorTankAtmosphericVariant.bar;\n  @property({type: String, reflect: true})\n  value: IndicatorTankAtmosphericValue = IndicatorTankAtmosphericValue.regular;\n  /** Current level, 0-100 (%) */\n  @property({type: Number}) level = 0;\n  /** History samples, 0-100 (%) each, oldest first */\n  @property({type: Array}) data: number[] = [];\n  @property({type: Boolean}) hasIcon = false;\n\n  private get scheme(): LinearIndicatorScheme {\n    switch (this.value) {\n      case IndicatorTankAtmosphericValue.enhanced:\n        return LinearIndicatorScheme.enhanced;\n      case IndicatorTankAtmosphericValue.medium:\n        return LinearIndicatorScheme.categorical;\n      default:\n        return LinearIndicatorScheme.regular;\n    }\n  }\n\n  override render() {\n    const horizontal = this.direction === IndicatorDirection.horizontal;\n    const trend = this.variant === IndicatorTankAtmosphericVariant.trend;\n    const barRect = horizontal\n      ? trend\n        ? HORIZONTAL_TREND\n        : HORIZONTAL_BAR\n      : trend\n        ? VERTICAL_TREND\n        : VERTICAL_BAR;\n    const frameTransform = horizontal\n      ? 'translate(3.5 7.5)'\n      : 'rotate(90 24 24) translate(3.5 7.5)';\n    const showIcon =\n      this.hasIcon && this.variant === IndicatorTankAtmosphericVariant.bar;\n    return html`\n      <svg viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n        <g transform=${frameTransform}>\n          <path class=\"frame\" d=${FRAME_PATH} />\n        </g>\n        ${this.variant === IndicatorTankAtmosphericVariant.trend\n          ? renderTrendGraph(\n              barRect,\n              this.data,\n              this.level,\n              this.scheme,\n              'tank'\n            )\n          : renderLinearBar(barRect, this.level, this.scheme, 'tank')}\n      </svg>\n      ${showIcon\n        ? html`<div class=\"icon-wrapper\">\n            <slot name=\"icon\"><obi-tank usecsscolor></obi-tank></slot>\n          </div>`\n        : nothing}\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-indicator-tank-atmospheric': ObcIndicatorTankAtmospheric;\n  }\n}\n"],"names":["IndicatorTankAtmosphericVariant","IndicatorTankAtmosphericValue"],"mappings":";;;;;;;;;;;;;;;;AAaO,IAAK,oDAAAA,qCAAL;AACLA,mCAAA,KAAA,IAAM;AACNA,mCAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,mCAAA,CAAA,CAAA;AAKL,IAAK,kDAAAC,mCAAL;AACLA,iCAAA,SAAA,IAAU;AACVA,iCAAA,UAAA,IAAW;AACXA,iCAAA,QAAA,IAAS;AAHC,SAAAA;AAAA,GAAA,iCAAA,CAAA,CAAA;AAMZ,MAAM,iBAAuB,EAAC,GAAG,GAAG,GAAG,IAAI,OAAO,IAAI,QAAQ,GAAA;AAC9D,MAAM,eAAqB,EAAC,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI,QAAQ,GAAA;AAC5D,MAAM,mBAAyB,EAAC,GAAG,GAAG,GAAG,IAAI,OAAO,IAAI,QAAQ,GAAA;AAChE,MAAM,iBAAuB,EAAC,GAAG,IAAI,GAAG,GAAG,OAAO,IAAI,QAAQ,GAAA;AAE9D,MAAM,aACJ;AAqCK,IAAM,8BAAN,cAA0C,WAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AACoC,SAAA,YACvC,mBAAmB;AAErB,SAAA,UACE;AAEF,SAAA,QAAuC;AAEb,SAAA,QAAQ;AAET,SAAA,OAAiB,CAAA;AACf,SAAA,UAAU;AAAA,EAAA;AAAA,EAErC,IAAY,SAAgC;AAC1C,YAAQ,KAAK,OAAA;AAAA,MACX,KAAK;AACH,eAAO,sBAAsB;AAAA,MAC/B,KAAK;AACH,eAAO,sBAAsB;AAAA,MAC/B;AACE,eAAO,sBAAsB;AAAA,IAAA;AAAA,EAEnC;AAAA,EAES,SAAS;AAChB,UAAM,aAAa,KAAK,cAAc,mBAAmB;AACzD,UAAM,QAAQ,KAAK,YAAY;AAC/B,UAAM,UAAU,aACZ,QACE,mBACA,iBACF,QACE,iBACA;AACN,UAAM,iBAAiB,aACnB,uBACA;AACJ,UAAM,WACJ,KAAK,WAAW,KAAK,YAAY;AACnC,WAAO;AAAA;AAAA,uBAEY,cAAc;AAAA,kCACH,UAAU;AAAA;AAAA,UAElC,KAAK,YAAY,UACf;AAAA,MACE;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL;AAAA,IAAA,IAEF,gBAAgB,SAAS,KAAK,OAAO,KAAK,QAAQ,MAAM,CAAC;AAAA;AAAA,QAE7D,WACE;AAAA;AAAA,oBAGA,OAAO;AAAA;AAAA,EAEf;AAGF;AAhEa,4BA+DK,SAAS,UAAU,cAAc;AA9DR,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAD5B,4BAC8B,WAAA,aAAA,CAAA;AAGzC,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAH5B,4BAIX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAN5B,4BAOX,WAAA,SAAA,CAAA;AAE0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GATb,4BASe,WAAA,SAAA,CAAA;AAED,gBAAA;AAAA,EAAxB,SAAS,EAAC,MAAM,MAAA,CAAM;AAAA,GAXZ,4BAWc,WAAA,QAAA,CAAA;AACE,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAZd,4BAYgB,WAAA,WAAA,CAAA;AAZhB,8BAAN,gBAAA;AAAA,EADN,cAAc,gCAAgC;AAAA,GAClC,2BAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.110",
+  "version": "2.0.0-next.111",
   "type": "module",
   "repository": {
     "type": "git",

package/src/automation/indicator-battery/indicator-battery.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.shell {
+  fill: var(--instrument-frame-primary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+.tip {
+  fill: var(--instrument-frame-tertiary-color);
+}
+
+.icon-wrapper {
+  position: absolute;
+  inset: 12px;
+  color: var(--element-neutral-color);
+}
+
+:host([value="enhanced"]) .icon-wrapper {
+  color: var(--element-neutral-enhanced-color);
+}
+
+:host([value="categorical"]) .icon-wrapper {
+  color: var(--base-teal-500);
+}
+
+.icon-wrapper ::slotted(*),
+.icon-wrapper obi-energy-battery {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/automation/indicator-battery/indicator-battery.stories.ts

@@ -0,0 +1,94 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  ObcIndicatorBattery,
+  IndicatorBatteryVariant,
+  IndicatorBatteryValue,
+} from './indicator-battery.js';
+import './indicator-battery.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Battery',
+  component: 'obc-indicator-battery',
+  tags: ['autodocs', '6.0'],
+  args: {
+    direction: IndicatorDirection.vertical,
+    variant: IndicatorBatteryVariant.bar,
+    value: IndicatorBatteryValue.regular,
+    level: 40,
+    data: [60, 52, 58, 45, 50, 42, 44, 40],
+    hasIcon: false,
+  },
+  argTypes: {
+    direction: {
+      control: 'radio',
+      options: Object.values(IndicatorDirection),
+    },
+    variant: {
+      control: 'radio',
+      options: Object.values(IndicatorBatteryVariant),
+    },
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorBatteryValue),
+    },
+    level: {control: {type: 'range', min: 0, max: 100}},
+  },
+  render: (args) => html`
+    <obc-indicator-battery
+      .direction=${args.direction}
+      .variant=${args.variant}
+      .value=${args.value}
+      .level=${args.level}
+      .data=${args.data}
+      .hasIcon=${args.hasIcon}
+    ></obc-indicator-battery>
+  `,
+} satisfies Meta<Partial<ObcIndicatorBattery>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorBattery>>;
+
+export const Default: Story = {};
+
+export const BarHorizontal: Story = {
+  args: {direction: IndicatorDirection.horizontal},
+};
+
+export const TrendVertical: Story = {
+  args: {variant: IndicatorBatteryVariant.trend},
+};
+
+export const TrendHorizontal: Story = {
+  args: {
+    variant: IndicatorBatteryVariant.trend,
+    direction: IndicatorDirection.horizontal,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {value: IndicatorBatteryValue.enhanced},
+};
+
+export const Categorical: Story = {
+  args: {value: IndicatorBatteryValue.categorical},
+};
+
+export const TrendEnhanced: Story = {
+  args: {
+    variant: IndicatorBatteryVariant.trend,
+    value: IndicatorBatteryValue.enhanced,
+  },
+};
+
+export const TrendCategorical: Story = {
+  args: {
+    variant: IndicatorBatteryVariant.trend,
+    value: IndicatorBatteryValue.categorical,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {hasIcon: true},
+};

package/src/automation/indicator-battery/indicator-battery.ts

@@ -0,0 +1,149 @@
+import {LitElement, html, unsafeCSS, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-battery.css?inline';
+import {customElement} from '../../decorator.js';
+import '../../icons/icon-energy-battery.js';
+import {
+  IndicatorDirection,
+  LinearIndicatorScheme,
+  Rect,
+  renderLinearBar,
+  renderTrendGraph,
+} from '../indicator-shared/linear-indicator.js';
+
+export enum IndicatorBatteryVariant {
+  bar = 'bar',
+  trend = 'trend',
+}
+
+export enum IndicatorBatteryValue {
+  regular = 'regular',
+  enhanced = 'enhanced',
+  categorical = 'categorical',
+}
+
+const HORIZONTAL_SHELL: Rect = {x: 6, y: 8, width: 36, height: 32};
+const VERTICAL_SHELL: Rect = {x: 8, y: 6, width: 32, height: 36};
+const HORIZONTAL_BAR: Rect = {x: 9, y: 11, width: 30, height: 26};
+const VERTICAL_BAR: Rect = {x: 11, y: 9, width: 26, height: 30};
+const HORIZONTAL_TREND: Rect = {x: 8, y: 10, width: 32, height: 28};
+const VERTICAL_TREND: Rect = {x: 10, y: 8, width: 28, height: 32};
+
+const HORIZONTAL_TIP_PATH =
+  'M42 18 H44 A2 2 0 0 1 46 20 V28 A2 2 0 0 1 44 30 H42 Z';
+const VERTICAL_TIP_PATH = 'M18 6 V4 A2 2 0 0 1 20 2 H28 A2 2 0 0 1 30 4 V6 Z';
+
+/**
+ * Compact 48×48 battery charge indicator.
+ *
+ * ## Features / Variants
+ * - `variant`: `bar` (bottom-up percentage fill) or `trend` (history graph
+ *   with a current-value micro-bar)
+ * - `direction`: `vertical` or `horizontal` battery shell
+ * - `value`: color scheme — `regular`, `enhanced` or `categorical`
+ * - `level`: current charge 0–100 (%), drives the fill and micro-bar
+ * - `data`: history samples 0–100 (%) drawn as the trend graph
+ * - `hasIcon`: centered icon overlay (bar variant only)
+ *
+ * ## Usage Guidelines
+ * Use as an at-a-glance charge indicator in dashboards and lists. For a
+ * full-featured tank/battery cell with readouts, badges and setpoints, use
+ * `obc-automation-tank` (type `battery`) instead.
+ *
+ * ## Best Practices / Constraints
+ * - `level` and `data` values are clamped to 0–100; values outside that
+ *   range are pinned to the nearest bound.
+ * - The `trend` variant needs at least two `data` samples to draw a line;
+ *   with fewer it shows only the current-value micro-bar.
+ * - The `icon` slot renders only in the `bar` variant; it is ignored in
+ *   `trend`.
+ * - Display-only: the root SVG is `aria-hidden`; convey battery state to
+ *   assistive tech through adjacent text if it is not otherwise available.
+ *
+ * ## Slots
+ * | Slot   | Condition                     | Purpose                        |
+ * | ------ | ----------------------------- | ------------------------------ |
+ * | `icon` | `hasIcon` and `variant='bar'` | Icon overlay (`obi-*` element) |
+ *
+ * @slot icon - Centered icon overlay, defaults to `obi-energy-battery`
+ */
+@customElement('obc-indicator-battery')
+export class ObcIndicatorBattery extends LitElement {
+  @property({type: String, reflect: true}) direction: IndicatorDirection =
+    IndicatorDirection.vertical;
+  @property({type: String, reflect: true}) variant: IndicatorBatteryVariant =
+    IndicatorBatteryVariant.bar;
+  @property({type: String, reflect: true}) value: IndicatorBatteryValue =
+    IndicatorBatteryValue.regular;
+  /** Current charge, 0-100 (%) */
+  @property({type: Number}) level = 0;
+  /** History samples, 0-100 (%) each, oldest first */
+  @property({type: Array}) data: number[] = [];
+  @property({type: Boolean}) hasIcon = false;
+
+  private get scheme(): LinearIndicatorScheme {
+    switch (this.value) {
+      case IndicatorBatteryValue.enhanced:
+        return LinearIndicatorScheme.enhanced;
+      case IndicatorBatteryValue.categorical:
+        return LinearIndicatorScheme.categorical;
+      default:
+        return LinearIndicatorScheme.regular;
+    }
+  }
+
+  override render() {
+    const horizontal = this.direction === IndicatorDirection.horizontal;
+    const trend = this.variant === IndicatorBatteryVariant.trend;
+    const shell = horizontal ? HORIZONTAL_SHELL : VERTICAL_SHELL;
+    const barRect = horizontal
+      ? trend
+        ? HORIZONTAL_TREND
+        : HORIZONTAL_BAR
+      : trend
+        ? VERTICAL_TREND
+        : VERTICAL_BAR;
+    const showIcon =
+      this.hasIcon && this.variant === IndicatorBatteryVariant.bar;
+    return html`
+      <svg viewBox="0 0 48 48" aria-hidden="true">
+        <path
+          class="tip"
+          d=${horizontal ? HORIZONTAL_TIP_PATH : VERTICAL_TIP_PATH}
+        />
+        <rect
+          class="shell"
+          x=${shell.x}
+          y=${shell.y}
+          width=${shell.width}
+          height=${shell.height}
+          rx="4"
+        />
+        ${this.variant === IndicatorBatteryVariant.trend
+          ? renderTrendGraph(
+              barRect,
+              this.data,
+              this.level,
+              this.scheme,
+              'battery'
+            )
+          : renderLinearBar(barRect, this.level, this.scheme, 'battery')}
+      </svg>
+      ${showIcon
+        ? html`<div class="icon-wrapper">
+            <slot name="icon">
+              <obi-energy-battery usecsscolor></obi-energy-battery>
+            </slot>
+          </div>`
+        : nothing}
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-battery': ObcIndicatorBattery;
+  }
+}

package/src/automation/indicator-engine/indicator-engine.css

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+  width: 48px;
+  height: 48px;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.frame {
+  fill: var(--instrument-frame-primary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+.rail {
+  fill: var(--instrument-frame-tertiary-color);
+}
+
+.cylinder {
+  fill: var(--instrument-frame-tertiary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+:host([value="regular"]) .cylinder {
+  fill: var(--automation-device-secondary-color);
+  stroke: var(--element-neutral-color);
+}
+
+:host([value="enhanced"]) .cylinder {
+  fill: var(--base-blue-300);
+  stroke: var(--element-neutral-enhanced-color);
+}

package/src/automation/indicator-engine/indicator-engine.stories.ts

@@ -0,0 +1,48 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {ObcIndicatorEngine, IndicatorEngineValue} from './indicator-engine.js';
+import './indicator-engine.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Engine',
+  component: 'obc-indicator-engine',
+  tags: ['autodocs', '6.0'],
+  args: {
+    value: IndicatorEngineValue.static,
+    direction: IndicatorDirection.vertical,
+  },
+  argTypes: {
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorEngineValue),
+    },
+    direction: {
+      control: 'radio',
+      options: Object.values(IndicatorDirection),
+    },
+  },
+  render: (args) => html`
+    <obc-indicator-engine
+      .value=${args.value}
+      .direction=${args.direction}
+    ></obc-indicator-engine>
+  `,
+} satisfies Meta<Partial<ObcIndicatorEngine>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorEngine>>;
+
+export const Default: Story = {};
+
+export const Horizontal: Story = {
+  args: {direction: IndicatorDirection.horizontal},
+};
+
+export const Regular: Story = {
+  args: {value: IndicatorEngineValue.regular},
+};
+
+export const Enhanced: Story = {
+  args: {value: IndicatorEngineValue.enhanced},
+};

package/src/automation/indicator-engine/indicator-engine.ts

@@ -0,0 +1,78 @@
+import {LitElement, html, svg, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-engine.css?inline';
+import {customElement} from '../../decorator.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+export enum IndicatorEngineValue {
+  static = 'static',
+  regular = 'regular',
+  enhanced = 'enhanced',
+}
+
+const CYLINDER_RADIUS = 3;
+const HORIZONTAL_CYLINDER_CENTERS = [12, 20, 28, 36];
+const VERTICAL_CYLINDER_CENTERS = [12, 20, 28, 36];
+
+/**
+ * Compact 48×48 engine indicator glyph.
+ *
+ * ## Features / Variants
+ * - `direction`: `vertical` (upright block with side rails) or `horizontal`
+ *   (lying block on a base rail)
+ * - `value`: cylinder color — `static`, `regular` or `enhanced`
+ *
+ * ## Usage Guidelines
+ * Use as a static engine presence/state glyph in dashboards and lists.
+ * It carries no numeric value; pair it with readouts or other indicators
+ * when quantities must be shown.
+ */
+@customElement('obc-indicator-engine')
+export class ObcIndicatorEngine extends LitElement {
+  @property({type: String, reflect: true}) value: IndicatorEngineValue =
+    IndicatorEngineValue.static;
+  @property({type: String, reflect: true}) direction: IndicatorDirection =
+    IndicatorDirection.vertical;
+
+  private renderHorizontal() {
+    return svg`
+      <rect class="rail" x="6" y="38" width="36" height="4" rx="2" />
+      <rect class="frame" x="6" y="12" width="36" height="24" rx="4" />
+      <rect class="rail" x="9" y="24" width="30" height="1" rx="0.5" />
+      ${HORIZONTAL_CYLINDER_CENTERS.map(
+        (cx) =>
+          svg`<circle class="cylinder" cx=${cx} cy="18" r=${CYLINDER_RADIUS} />`
+      )}
+    `;
+  }
+
+  private renderVertical() {
+    return svg`
+      <rect class="frame" x="12" y="6" width="24" height="36" rx="4" />
+      <rect class="rail" x="16" y="10" width="1" height="28" rx="0.5" />
+      <rect class="rail" x="31" y="10" width="1" height="28" rx="0.5" />
+      ${VERTICAL_CYLINDER_CENTERS.map(
+        (cy) =>
+          svg`<circle class="cylinder" cx="24" cy=${cy} r=${CYLINDER_RADIUS} />`
+      )}
+    `;
+  }
+
+  override render() {
+    return html`
+      <svg viewBox="0 0 48 48" aria-hidden="true">
+        ${this.direction === IndicatorDirection.horizontal
+          ? this.renderHorizontal()
+          : this.renderVertical()}
+      </svg>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-engine': ObcIndicatorEngine;
+  }
+}

package/src/automation/indicator-generator/indicator-generator-geometry.spec.ts

@@ -0,0 +1,62 @@
+import {describe, it, expect} from 'vitest';
+import {
+  arcPath,
+  progressSweep,
+  polarPoint,
+} from './indicator-generator-geometry.js';
+
+describe('progressSweep', () => {
+  it('is 0 at level 0', () => {
+    expect(progressSweep(0)).toBe(0);
+  });
+
+  it('is 360 at level 100', () => {
+    expect(progressSweep(100)).toBe(360);
+  });
+
+  it('interpolates linearly', () => {
+    expect(progressSweep(50)).toBeCloseTo(180);
+  });
+
+  it('clamps out-of-range levels', () => {
+    expect(progressSweep(150)).toBe(360);
+    expect(progressSweep(-10)).toBe(0);
+  });
+});
+
+describe('polarPoint', () => {
+  it('maps angle 0 to the top of the circle', () => {
+    expect(polarPoint(24, 24, 18, 0)).toEqual({x: 24, y: 6});
+  });
+
+  it('maps angle 90 to the right of the circle', () => {
+    expect(polarPoint(24, 24, 18, 90)).toEqual({x: 42, y: 24});
+  });
+
+  it('maps angle 180 to the bottom of the circle', () => {
+    expect(polarPoint(24, 24, 18, 180)).toEqual({x: 24, y: 42});
+  });
+});
+
+describe('arcPath', () => {
+  it('returns empty string for zero or negative sweep', () => {
+    expect(arcPath(24, 24, 18, 0, 0)).toBe('');
+    expect(arcPath(24, 24, 18, 90, 45)).toBe('');
+  });
+
+  it('uses a single arc segment for sweeps up to 180', () => {
+    const d = arcPath(24, 24, 18, 0, 90);
+    expect(d.startsWith('M')).toBe(true);
+    expect((d.match(/A/g) ?? []).length).toBe(1);
+  });
+
+  it('splits sweeps above 180 into two arc segments', () => {
+    const d = arcPath(24, 24, 18, 0, 270);
+    expect((d.match(/A/g) ?? []).length).toBe(2);
+  });
+
+  it('starts at the start angle', () => {
+    const d = arcPath(24, 24, 18, 0, 90);
+    expect(d.startsWith('M 24 6')).toBe(true);
+  });
+});

package/src/automation/indicator-generator/indicator-generator-geometry.ts

@@ -0,0 +1,63 @@
+export const BUTTON_SILHOUETTE_RADIUS = 18.5;
+export const DISC_RADIUS = 17.5;
+export const FILLED_DISC_RADIUS = 18.5;
+export const BAR_SILHOUETTE_RADIUS = 19.5;
+export const BAR_SILHOUETTE_STROKE_WIDTH = 3;
+export const BAR_OUTLINE_RADIUS = 16.5;
+export const DOUBLE_BAR_OUTLINE_RADIUS = 17.5;
+export const OUTLINE_STROKE_WIDTH = 3;
+export const BAR_TRACK_RADIUS = 18;
+export const BAR_TRACK_STROKE_WIDTH = 4;
+export const DOUBLE_BAR_OUTER_RADIUS = 22;
+export const DOUBLE_BAR_OUTER_STROKE_WIDTH = 4;
+export const DOUBLE_BAR_INNER_RADIUS = 18;
+export const DOUBLE_BAR_INNER_STROKE_WIDTH = 2;
+
+export function clampPercent(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+
+/** Sweep (deg) of the progress arc, clockwise from 12 o'clock. */
+export function progressSweep(level: number): number {
+  return (360 * clampPercent(level)) / 100;
+}
+
+/** Point on a circle; angle in degrees clockwise from 12 o'clock. */
+export function polarPoint(
+  cx: number,
+  cy: number,
+  radius: number,
+  angleDeg: number
+): {x: number; y: number} {
+  const rad = (angleDeg * Math.PI) / 180;
+  return {
+    x: Math.round((cx + radius * Math.sin(rad)) * 1000) / 1000,
+    y: Math.round((cy - radius * Math.cos(rad)) * 1000) / 1000,
+  };
+}
+
+/**
+ * Circular arc path from startAngle to endAngle (deg, clockwise from
+ * 12 o'clock), meant to be stroked. Sweeps above 180° are split into two
+ * arc segments; non-positive sweeps yield an empty string. Full circles
+ * (sweep 360) should be drawn with a `<circle>` element instead.
+ */
+export function arcPath(
+  cx: number,
+  cy: number,
+  radius: number,
+  startAngleDeg: number,
+  endAngleDeg: number
+): string {
+  const sweep = endAngleDeg - startAngleDeg;
+  if (sweep <= 0) return '';
+  const start = polarPoint(cx, cy, radius, startAngleDeg);
+  if (sweep > 180) {
+    const mid = polarPoint(cx, cy, radius, startAngleDeg + sweep / 2);
+    const end = polarPoint(cx, cy, radius, endAngleDeg);
+    return `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${mid.x} ${mid.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y}`;
+  }
+  const end = polarPoint(cx, cy, radius, endAngleDeg);
+  return `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 1 ${end.x} ${end.y}`;
+}