@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

package/dist/svghelpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/svghelpers/rounded-rect.d.ts

@@ -0,0 +1,15 @@
+export interface RoundedRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Corner radii in CSS order: top-left, top-right, bottom-right, bottom-left. */
+    radii: [number, number, number, number];
+}
+/**
+ * SVG path of a rectangle with per-corner radii, so a stroke can follow a
+ * box whose corners are individually sharp (the alert frame's
+ * `sharpEdge*` flags). Radii are clamped to half the shorter side.
+ */
+export declare function roundedRectPath({ x, y, width, height, radii, }: RoundedRect): string;
+//# sourceMappingURL=rounded-rect.d.ts.map

package/dist/svghelpers/rounded-rect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rounded-rect.d.ts","sourceRoot":"","sources":["../../src/svghelpers/rounded-rect.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,CAAC,EACD,CAAC,EACD,KAAK,EACL,MAAM,EACN,KAAK,GACN,EAAE,WAAW,GAAG,MAAM,CAqBtB"}

package/dist/svghelpers/rounded-rect.js

@@ -0,0 +1,29 @@
+function roundedRectPath({
+  x,
+  y,
+  width,
+  height,
+  radii
+}) {
+  const max = Math.min(width, height) / 2;
+  const [tl, tr, br, bl] = radii.map((r) => Math.max(0, Math.min(r, max)));
+  const right = x + width;
+  const bottom = y + height;
+  const arc = (r, endX, endY) => r > 0 ? `A${r} ${r} 0 0 1 ${endX} ${endY}` : "";
+  return [
+    `M${x + tl} ${y}`,
+    `H${right - tr}`,
+    arc(tr, right, y + tr),
+    `V${bottom - br}`,
+    arc(br, right - br, bottom),
+    `H${x + bl}`,
+    arc(bl, x, bottom - bl),
+    `V${y + tl}`,
+    arc(tl, x + tl, y),
+    "Z"
+  ].filter(Boolean).join(" ");
+}
+export {
+  roundedRectPath
+};
+//# sourceMappingURL=rounded-rect.js.map

package/dist/svghelpers/rounded-rect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rounded-rect.js","sources":["../../src/svghelpers/rounded-rect.ts"],"sourcesContent":["export interface RoundedRect {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  /** Corner radii in CSS order: top-left, top-right, bottom-right, bottom-left. */\n  radii: [number, number, number, number];\n}\n\n/**\n * SVG path of a rectangle with per-corner radii, so a stroke can follow a\n * box whose corners are individually sharp (the alert frame's\n * `sharpEdge*` flags). Radii are clamped to half the shorter side.\n */\nexport function roundedRectPath({\n  x,\n  y,\n  width,\n  height,\n  radii,\n}: RoundedRect): string {\n  const max = Math.min(width, height) / 2;\n  const [tl, tr, br, bl] = radii.map((r) => Math.max(0, Math.min(r, max)));\n  const right = x + width;\n  const bottom = y + height;\n  const arc = (r: number, endX: number, endY: number) =>\n    r > 0 ? `A${r} ${r} 0 0 1 ${endX} ${endY}` : '';\n  return [\n    `M${x + tl} ${y}`,\n    `H${right - tr}`,\n    arc(tr, right, y + tr),\n    `V${bottom - br}`,\n    arc(br, right - br, bottom),\n    `H${x + bl}`,\n    arc(bl, x, bottom - bl),\n    `V${y + tl}`,\n    arc(tl, x + tl, y),\n    'Z',\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n"],"names":[],"mappings":"AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,MAAM,KAAK,IAAI,OAAO,MAAM,IAAI;AACtC,QAAM,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,MAAM,IAAI,CAAC,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,GAAG,CAAC,CAAC;AACvE,QAAM,QAAQ,IAAI;AAClB,QAAM,SAAS,IAAI;AACnB,QAAM,MAAM,CAAC,GAAW,MAAc,SACpC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,IAAI,KAAK;AAC/C,SAAO;AAAA,IACL,IAAI,IAAI,EAAE,IAAI,CAAC;AAAA,IACf,IAAI,QAAQ,EAAE;AAAA,IACd,IAAI,IAAI,OAAO,IAAI,EAAE;AAAA,IACrB,IAAI,SAAS,EAAE;AAAA,IACf,IAAI,IAAI,QAAQ,IAAI,MAAM;AAAA,IAC1B,IAAI,IAAI,EAAE;AAAA,IACV,IAAI,IAAI,GAAG,SAAS,EAAE;AAAA,IACtB,IAAI,IAAI,EAAE;AAAA,IACV,IAAI,IAAI,IAAI,IAAI,CAAC;AAAA,IACjB;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AACb;"}

package/dist/types.d.ts

@@ -14,6 +14,20 @@ export declare enum AlertType {
     LevelLow = "level-low",
     LevelDiagnostic = "level-diagnostic"
 }
+/**
+ * Flash tempo of an alert element. `default` resolves per alert type and
+ * phase (see `resolveFlashingSpeed` in `alert-severity.ts`); `fixed` never
+ * flashes.
+ */
+export declare enum FlashingSpeed {
+    Default = "default",
+    Fast = "fast",
+    Slow = "slow",
+    VerySlow = "very-slow",
+    Fixed = "fixed"
+}
+export type ResolvedFlashingSpeed = Exclude<FlashingSpeed, FlashingSpeed.Default>;
+export type FlashTempo = Exclude<ResolvedFlashingSpeed, FlashingSpeed.Fixed>;
 export declare const ALERT_SEVERITY_PRIORITY: AlertType[];
 export declare enum AlertCategory {
     a = "a",

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,aAAa,mBAAmB;IAChC,SAAS,eAAe;IACxB,WAAW,iBAAiB;IAC5B,QAAQ,cAAc;IACtB,eAAe,qBAAqB;CACrC;AAED,eAAO,MAAM,uBAAuB,aASnC,CAAC;AAEF,oBAAY,aAAa;IACvB,CAAC,MAAM;IACP,CAAC,MAAM;IACP,CAAC,MAAM;CACR;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,EACR,KAAK,GACL;QACE,cAAc,EAAE,MAAM,CAAC;QACvB,cAAc,EAAE,IAAI,CAAC;KACtB,CAAC;IACN,MAAM,EACF,IAAI,GACJ;QACE,aAAa,EAAE,IAAI,CAAC;KACrB,CAAC;IACN,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,OAAO,CAAC,EACJ,KAAK,GACL;QACE,gBAAgB,EAAE,IAAI,CAAC;QACvB,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACN,OAAO,CAAC,EACJ,KAAK,GACL;QACE,gBAAgB,EAAE,IAAI,CAAC;QACvB,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACN,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,WAEpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,WAE1C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,WAErC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,WAErC;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,UAgBvD;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;AAEjD,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,UA0BzC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS;IACnB,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,aAAa,mBAAmB;IAChC,SAAS,eAAe;IACxB,WAAW,iBAAiB;IAC5B,QAAQ,cAAc;IACtB,eAAe,qBAAqB;CACrC;AAED;;;;GAIG;AACH,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,QAAQ,cAAc;IACtB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,aAAa,EACb,aAAa,CAAC,OAAO,CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,qBAAqB,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;AAE7E,eAAO,MAAM,uBAAuB,aASnC,CAAC;AAEF,oBAAY,aAAa;IACvB,CAAC,MAAM;IACP,CAAC,MAAM;IACP,CAAC,MAAM;CACR;AAED,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,EACR,KAAK,GACL;QACE,cAAc,EAAE,MAAM,CAAC;QACvB,cAAc,EAAE,IAAI,CAAC;KACtB,CAAC;IACN,MAAM,EACF,IAAI,GACJ;QACE,aAAa,EAAE,IAAI,CAAC;KACrB,CAAC;IACN,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,OAAO,CAAC,EACJ,KAAK,GACL;QACE,gBAAgB,EAAE,IAAI,CAAC;QACvB,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACN,OAAO,CAAC,EACJ,KAAK,GACL;QACE,gBAAgB,EAAE,IAAI,CAAC;QACvB,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACN,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,WAEpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,WAE1C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,WAErC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,WAErC;AAED,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,UAgBvD;AAED,MAAM,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;AAEjD,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,UA0BzC"}

package/dist/types.js

@@ -16,6 +16,14 @@ var AlertType = /* @__PURE__ */ ((AlertType2) => {
   AlertType2["LevelDiagnostic"] = "level-diagnostic";
   return AlertType2;
 })(AlertType || {});
+var FlashingSpeed = /* @__PURE__ */ ((FlashingSpeed2) => {
+  FlashingSpeed2["Default"] = "default";
+  FlashingSpeed2["Fast"] = "fast";
+  FlashingSpeed2["Slow"] = "slow";
+  FlashingSpeed2["VerySlow"] = "very-slow";
+  FlashingSpeed2["Fixed"] = "fixed";
+  return FlashingSpeed2;
+})(FlashingSpeed || {});
 const ALERT_SEVERITY_PRIORITY = [
   "level-critical",
   "alarm",
@@ -83,6 +91,7 @@ export {
   AlertCategory,
   AlertType,
   Direction,
+  FlashingSpeed,
   comparePriorityAlerts,
   formatTimeSince,
   isAcknowledged,

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["export enum Direction {\n  Up = 'up',\n  Down = 'down',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum AlertType {\n  Alarm = 'alarm',\n  Warning = 'warning',\n  Caution = 'caution',\n  LevelCritical = 'level-critical',\n  LevelHigh = 'level-high',\n  LevelMedium = 'level-medium',\n  LevelLow = 'level-low',\n  LevelDiagnostic = 'level-diagnostic',\n}\n\nexport const ALERT_SEVERITY_PRIORITY = [\n  AlertType.LevelCritical,\n  AlertType.Alarm,\n  AlertType.LevelHigh,\n  AlertType.Warning,\n  AlertType.LevelMedium,\n  AlertType.Caution,\n  AlertType.LevelLow,\n  AlertType.LevelDiagnostic,\n];\n\nexport enum AlertCategory {\n  a = 'a',\n  b = 'b',\n  c = 'c',\n}\n\nexport interface Alert {\n  id: string;\n  tagId: string;\n  source: string;\n  text: string;\n  note?: string;\n  acknowledged:\n    | false\n    | {\n        acknowledgedBy: string;\n        acknowledgedAt: Date;\n      };\n  active:\n    | true\n    | {\n        rectifiedTime: Date;\n      };\n  type: AlertType;\n  time: Date;\n  lastModified?: Date;\n  shelved?:\n    | false\n    | {\n        shelvedStartTime: Date;\n        shelvedEndTime?: Date;\n        shelvedBy?: string;\n      };\n  blocked?:\n    | false\n    | {\n        blockedStartTime: Date;\n        blockedEndTime?: Date;\n        blockedBy?: string;\n      };\n  noAck?: boolean;\n  noSilence?: boolean;\n  category?: AlertCategory;\n  memberOf?: string[];\n}\n\nexport function isActive(alert: Alert) {\n  return alert.active === true;\n}\n\nexport function isAcknowledged(alert: Alert) {\n  return alert.acknowledged !== false && alert.acknowledged !== undefined;\n}\n\nexport function isShelved(alert: Alert) {\n  return alert.shelved !== false && alert.shelved !== undefined;\n}\n\nexport function isBlocked(alert: Alert) {\n  return alert.blocked !== false && alert.blocked !== undefined;\n}\n\nexport function comparePriorityAlerts(a: Alert, b: Alert) {\n  if (a.type !== b.type) {\n    return (\n      ALERT_SEVERITY_PRIORITY.indexOf(b.type) -\n      ALERT_SEVERITY_PRIORITY.indexOf(a.type)\n    );\n  }\n\n  if (isActive(a) !== isActive(b)) {\n    return isActive(a) ? 1 : -1;\n  }\n\n  if (isAcknowledged(a) !== isAcknowledged(b)) {\n    return isAcknowledged(a) ? -1 : 1;\n  }\n  return a.time.getTime() - b.time.getTime();\n}\n\nexport type TimeSinceFn = (time: Date) => string;\n\nexport function formatTimeSince(time: Date) {\n  const now = new Date();\n  const diff = now.getTime() - time.getTime();\n  const diffInSeconds = diff / 1000;\n  if (diffInSeconds < 60) {\n    return Math.round(diffInSeconds) + 's';\n  }\n  const diffInMinutes = diffInSeconds / 60;\n  if (diffInMinutes < 60) {\n    return (\n      Math.round(diffInMinutes) + 'm ' + Math.round(diffInSeconds % 60) + 's'\n    );\n  }\n  const diffInHours = diffInMinutes / 60;\n  if (diffInHours < 24) {\n    return (\n      Math.round(diffInHours) + 'h ' + Math.round(diffInMinutes % 60) + 'm'\n    );\n  }\n  const diffInDays = diffInHours / 24;\n  if (diffInDays < 365) {\n    return Math.round(diffInDays) + 'd ' + Math.round(diffInHours % 24) + 'h';\n  }\n  return (\n    Math.round(diffInDays / 365) + 'y ' + Math.round(diffInDays % 365) + 'd'\n  );\n}\n"],"names":["Direction","AlertType","AlertCategory"],"mappings":"AAAO,IAAK,8BAAAA,eAAL;AACLA,aAAA,IAAA,IAAK;AACLA,aAAA,MAAA,IAAO;AACPA,aAAA,MAAA,IAAO;AACPA,aAAA,OAAA,IAAQ;AAJE,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAOL,IAAK,8BAAAC,eAAL;AACLA,aAAA,OAAA,IAAQ;AACRA,aAAA,SAAA,IAAU;AACVA,aAAA,SAAA,IAAU;AACVA,aAAA,eAAA,IAAgB;AAChBA,aAAA,WAAA,IAAY;AACZA,aAAA,aAAA,IAAc;AACdA,aAAA,UAAA,IAAW;AACXA,aAAA,iBAAA,IAAkB;AARR,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAWL,MAAM,0BAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AACF;AAEO,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,GAAA,IAAI;AACJA,iBAAA,GAAA,IAAI;AACJA,iBAAA,GAAA,IAAI;AAHM,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AA8CL,SAAS,SAAS,OAAc;AACrC,SAAO,MAAM,WAAW;AAC1B;AAEO,SAAS,eAAe,OAAc;AAC3C,SAAO,MAAM,iBAAiB,SAAS,MAAM,iBAAiB;AAChE;AAEO,SAAS,UAAU,OAAc;AACtC,SAAO,MAAM,YAAY,SAAS,MAAM,YAAY;AACtD;AAEO,SAAS,UAAU,OAAc;AACtC,SAAO,MAAM,YAAY,SAAS,MAAM,YAAY;AACtD;AAEO,SAAS,sBAAsB,GAAU,GAAU;AACxD,MAAI,EAAE,SAAS,EAAE,MAAM;AACrB,WACE,wBAAwB,QAAQ,EAAE,IAAI,IACtC,wBAAwB,QAAQ,EAAE,IAAI;AAAA,EAE1C;AAEA,MAAI,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG;AAC/B,WAAO,SAAS,CAAC,IAAI,IAAI;AAAA,EAC3B;AAEA,MAAI,eAAe,CAAC,MAAM,eAAe,CAAC,GAAG;AAC3C,WAAO,eAAe,CAAC,IAAI,KAAK;AAAA,EAClC;AACA,SAAO,EAAE,KAAK,QAAA,IAAY,EAAE,KAAK,QAAA;AACnC;AAIO,SAAS,gBAAgB,MAAY;AAC1C,QAAM,0BAAU,KAAA;AAChB,QAAM,OAAO,IAAI,QAAA,IAAY,KAAK,QAAA;AAClC,QAAM,gBAAgB,OAAO;AAC7B,MAAI,gBAAgB,IAAI;AACtB,WAAO,KAAK,MAAM,aAAa,IAAI;AAAA,EACrC;AACA,QAAM,gBAAgB,gBAAgB;AACtC,MAAI,gBAAgB,IAAI;AACtB,WACE,KAAK,MAAM,aAAa,IAAI,OAAO,KAAK,MAAM,gBAAgB,EAAE,IAAI;AAAA,EAExE;AACA,QAAM,cAAc,gBAAgB;AACpC,MAAI,cAAc,IAAI;AACpB,WACE,KAAK,MAAM,WAAW,IAAI,OAAO,KAAK,MAAM,gBAAgB,EAAE,IAAI;AAAA,EAEtE;AACA,QAAM,aAAa,cAAc;AACjC,MAAI,aAAa,KAAK;AACpB,WAAO,KAAK,MAAM,UAAU,IAAI,OAAO,KAAK,MAAM,cAAc,EAAE,IAAI;AAAA,EACxE;AACA,SACE,KAAK,MAAM,aAAa,GAAG,IAAI,OAAO,KAAK,MAAM,aAAa,GAAG,IAAI;AAEzE;"}
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["export enum Direction {\n  Up = 'up',\n  Down = 'down',\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum AlertType {\n  Alarm = 'alarm',\n  Warning = 'warning',\n  Caution = 'caution',\n  LevelCritical = 'level-critical',\n  LevelHigh = 'level-high',\n  LevelMedium = 'level-medium',\n  LevelLow = 'level-low',\n  LevelDiagnostic = 'level-diagnostic',\n}\n\n/**\n * Flash tempo of an alert element. `default` resolves per alert type and\n * phase (see `resolveFlashingSpeed` in `alert-severity.ts`); `fixed` never\n * flashes.\n */\nexport enum FlashingSpeed {\n  Default = 'default',\n  Fast = 'fast',\n  Slow = 'slow',\n  VerySlow = 'very-slow',\n  Fixed = 'fixed',\n}\n\nexport type ResolvedFlashingSpeed = Exclude<\n  FlashingSpeed,\n  FlashingSpeed.Default\n>;\n\nexport type FlashTempo = Exclude<ResolvedFlashingSpeed, FlashingSpeed.Fixed>;\n\nexport const ALERT_SEVERITY_PRIORITY = [\n  AlertType.LevelCritical,\n  AlertType.Alarm,\n  AlertType.LevelHigh,\n  AlertType.Warning,\n  AlertType.LevelMedium,\n  AlertType.Caution,\n  AlertType.LevelLow,\n  AlertType.LevelDiagnostic,\n];\n\nexport enum AlertCategory {\n  a = 'a',\n  b = 'b',\n  c = 'c',\n}\n\nexport interface Alert {\n  id: string;\n  tagId: string;\n  source: string;\n  text: string;\n  note?: string;\n  acknowledged:\n    | false\n    | {\n        acknowledgedBy: string;\n        acknowledgedAt: Date;\n      };\n  active:\n    | true\n    | {\n        rectifiedTime: Date;\n      };\n  type: AlertType;\n  time: Date;\n  lastModified?: Date;\n  shelved?:\n    | false\n    | {\n        shelvedStartTime: Date;\n        shelvedEndTime?: Date;\n        shelvedBy?: string;\n      };\n  blocked?:\n    | false\n    | {\n        blockedStartTime: Date;\n        blockedEndTime?: Date;\n        blockedBy?: string;\n      };\n  noAck?: boolean;\n  noSilence?: boolean;\n  category?: AlertCategory;\n  memberOf?: string[];\n}\n\nexport function isActive(alert: Alert) {\n  return alert.active === true;\n}\n\nexport function isAcknowledged(alert: Alert) {\n  return alert.acknowledged !== false && alert.acknowledged !== undefined;\n}\n\nexport function isShelved(alert: Alert) {\n  return alert.shelved !== false && alert.shelved !== undefined;\n}\n\nexport function isBlocked(alert: Alert) {\n  return alert.blocked !== false && alert.blocked !== undefined;\n}\n\nexport function comparePriorityAlerts(a: Alert, b: Alert) {\n  if (a.type !== b.type) {\n    return (\n      ALERT_SEVERITY_PRIORITY.indexOf(b.type) -\n      ALERT_SEVERITY_PRIORITY.indexOf(a.type)\n    );\n  }\n\n  if (isActive(a) !== isActive(b)) {\n    return isActive(a) ? 1 : -1;\n  }\n\n  if (isAcknowledged(a) !== isAcknowledged(b)) {\n    return isAcknowledged(a) ? -1 : 1;\n  }\n  return a.time.getTime() - b.time.getTime();\n}\n\nexport type TimeSinceFn = (time: Date) => string;\n\nexport function formatTimeSince(time: Date) {\n  const now = new Date();\n  const diff = now.getTime() - time.getTime();\n  const diffInSeconds = diff / 1000;\n  if (diffInSeconds < 60) {\n    return Math.round(diffInSeconds) + 's';\n  }\n  const diffInMinutes = diffInSeconds / 60;\n  if (diffInMinutes < 60) {\n    return (\n      Math.round(diffInMinutes) + 'm ' + Math.round(diffInSeconds % 60) + 's'\n    );\n  }\n  const diffInHours = diffInMinutes / 60;\n  if (diffInHours < 24) {\n    return (\n      Math.round(diffInHours) + 'h ' + Math.round(diffInMinutes % 60) + 'm'\n    );\n  }\n  const diffInDays = diffInHours / 24;\n  if (diffInDays < 365) {\n    return Math.round(diffInDays) + 'd ' + Math.round(diffInHours % 24) + 'h';\n  }\n  return (\n    Math.round(diffInDays / 365) + 'y ' + Math.round(diffInDays % 365) + 'd'\n  );\n}\n"],"names":["Direction","AlertType","FlashingSpeed","AlertCategory"],"mappings":"AAAO,IAAK,8BAAAA,eAAL;AACLA,aAAA,IAAA,IAAK;AACLA,aAAA,MAAA,IAAO;AACPA,aAAA,MAAA,IAAO;AACPA,aAAA,OAAA,IAAQ;AAJE,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAOL,IAAK,8BAAAC,eAAL;AACLA,aAAA,OAAA,IAAQ;AACRA,aAAA,SAAA,IAAU;AACVA,aAAA,SAAA,IAAU;AACVA,aAAA,eAAA,IAAgB;AAChBA,aAAA,WAAA,IAAY;AACZA,aAAA,aAAA,IAAc;AACdA,aAAA,UAAA,IAAW;AACXA,aAAA,iBAAA,IAAkB;AARR,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAgBL,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,SAAA,IAAU;AACVA,iBAAA,MAAA,IAAO;AACPA,iBAAA,MAAA,IAAO;AACPA,iBAAA,UAAA,IAAW;AACXA,iBAAA,OAAA,IAAQ;AALE,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAeL,MAAM,0BAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AACF;AAEO,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,GAAA,IAAI;AACJA,iBAAA,GAAA,IAAI;AACJA,iBAAA,GAAA,IAAI;AAHM,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AA8CL,SAAS,SAAS,OAAc;AACrC,SAAO,MAAM,WAAW;AAC1B;AAEO,SAAS,eAAe,OAAc;AAC3C,SAAO,MAAM,iBAAiB,SAAS,MAAM,iBAAiB;AAChE;AAEO,SAAS,UAAU,OAAc;AACtC,SAAO,MAAM,YAAY,SAAS,MAAM,YAAY;AACtD;AAEO,SAAS,UAAU,OAAc;AACtC,SAAO,MAAM,YAAY,SAAS,MAAM,YAAY;AACtD;AAEO,SAAS,sBAAsB,GAAU,GAAU;AACxD,MAAI,EAAE,SAAS,EAAE,MAAM;AACrB,WACE,wBAAwB,QAAQ,EAAE,IAAI,IACtC,wBAAwB,QAAQ,EAAE,IAAI;AAAA,EAE1C;AAEA,MAAI,SAAS,CAAC,MAAM,SAAS,CAAC,GAAG;AAC/B,WAAO,SAAS,CAAC,IAAI,IAAI;AAAA,EAC3B;AAEA,MAAI,eAAe,CAAC,MAAM,eAAe,CAAC,GAAG;AAC3C,WAAO,eAAe,CAAC,IAAI,KAAK;AAAA,EAClC;AACA,SAAO,EAAE,KAAK,QAAA,IAAY,EAAE,KAAK,QAAA;AACnC;AAIO,SAAS,gBAAgB,MAAY;AAC1C,QAAM,0BAAU,KAAA;AAChB,QAAM,OAAO,IAAI,QAAA,IAAY,KAAK,QAAA;AAClC,QAAM,gBAAgB,OAAO;AAC7B,MAAI,gBAAgB,IAAI;AACtB,WAAO,KAAK,MAAM,aAAa,IAAI;AAAA,EACrC;AACA,QAAM,gBAAgB,gBAAgB;AACtC,MAAI,gBAAgB,IAAI;AACtB,WACE,KAAK,MAAM,aAAa,IAAI,OAAO,KAAK,MAAM,gBAAgB,EAAE,IAAI;AAAA,EAExE;AACA,QAAM,cAAc,gBAAgB;AACpC,MAAI,cAAc,IAAI;AACpB,WACE,KAAK,MAAM,WAAW,IAAI,OAAO,KAAK,MAAM,gBAAgB,EAAE,IAAI;AAAA,EAEtE;AACA,QAAM,aAAa,cAAc;AACjC,MAAI,aAAa,KAAK;AACpB,WAAO,KAAK,MAAM,UAAU,IAAI,OAAO,KAAK,MAAM,cAAc,EAAE,IAAI;AAAA,EACxE;AACA,SACE,KAAK,MAAM,aAAa,GAAG,IAAI,OAAO,KAAK,MAAM,aAAa,GAAG,IAAI;AAEzE;"}

package/package.json

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

package/script/check-css-variables.ts

@@ -44,22 +44,9 @@ import fs from 'fs';
 import path from 'path';
 import {globby} from 'globby';
 
-// Bucket B from issue #916 — undefined CSS variables that still need a design
-// decision (token value, rename target, or removal). Tracked for follow-up.
-// See https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents/issues/916
+// Undefined CSS variables that only a fix in Figma can resolve (#929).
 const allowedUndefinedVariables = new Set([
-  // B-1: notification icon size (alert-menu-item.css, message-menu-item.css)
-  '--app-components-alert-components-general-notification-item-icon-size-large',
-  // B-2: alert counter spacing (alert-button.css)
-  '--app-components-global-alert-item-counter-spacing',
-  // B-3: likely typo for --normal-enabled-background-color (sequence-toolbar.css)
-  '--enabled-background-color',
-  // B-4: date-item vertical padding (date-item.css) — sibling tokens exist
-  '--menu-navigation-components-date-item-padding-vertical',
-  // B-5/B-6: instrument-field internal widths — unusual --obc- prefix
-  '--obc-instrument-field-source-width',
-  '--obc-instrument-field-tag-width',
-  // B-7: keyboard "numeric" tokens missing from the (misspelled) family
+  // B-7: Figma binds both to variables missing from Component-size
   '--ui-components-keyboard-numeric-component-height-min',
   '--ui-components-keyboard-numeric-touch-target-size',
 ]);

package/src/alert-severity.spec.ts

@@ -0,0 +1,56 @@
+import {describe, expect, it} from 'vitest';
+import {AlertFlashPhase, resolveFlashingSpeed} from './alert-severity.js';
+import {AlertType, FlashingSpeed} from './types.js';
+
+describe('resolveFlashingSpeed', () => {
+  it.each([
+    [AlertType.LevelCritical, FlashingSpeed.Fast],
+    [AlertType.Alarm, FlashingSpeed.Fast],
+    [AlertType.LevelHigh, FlashingSpeed.Fast],
+    [AlertType.Warning, FlashingSpeed.Slow],
+    [AlertType.LevelMedium, FlashingSpeed.Slow],
+    [AlertType.LevelLow, FlashingSpeed.VerySlow],
+    [AlertType.Caution, FlashingSpeed.Fixed],
+    [AlertType.LevelDiagnostic, FlashingSpeed.Fixed],
+  ])('default active %s → %s', (type, expected) => {
+    expect(resolveFlashingSpeed(FlashingSpeed.Default, type)).toBe(expected);
+    expect(
+      resolveFlashingSpeed(FlashingSpeed.Default, type, AlertFlashPhase.Active)
+    ).toBe(expected);
+  });
+
+  it.each([
+    [AlertType.LevelCritical, FlashingSpeed.VerySlow],
+    [AlertType.Alarm, FlashingSpeed.VerySlow],
+    [AlertType.LevelHigh, FlashingSpeed.VerySlow],
+    [AlertType.Warning, FlashingSpeed.VerySlow],
+    [AlertType.LevelMedium, FlashingSpeed.VerySlow],
+    [AlertType.LevelLow, FlashingSpeed.VerySlow],
+    [AlertType.Caution, FlashingSpeed.Fixed],
+    [AlertType.LevelDiagnostic, FlashingSpeed.Fixed],
+  ])('default rectified %s → %s', (type, expected) => {
+    expect(
+      resolveFlashingSpeed(
+        FlashingSpeed.Default,
+        type,
+        AlertFlashPhase.Rectified
+      )
+    ).toBe(expected);
+  });
+
+  it('returns an explicit speed unchanged', () => {
+    expect(resolveFlashingSpeed(FlashingSpeed.Slow, AlertType.Alarm)).toBe(
+      FlashingSpeed.Slow
+    );
+    expect(
+      resolveFlashingSpeed(
+        FlashingSpeed.Fast,
+        AlertType.Caution,
+        AlertFlashPhase.Rectified
+      )
+    ).toBe(FlashingSpeed.Fast);
+    expect(resolveFlashingSpeed(FlashingSpeed.Fixed, AlertType.Alarm)).toBe(
+      FlashingSpeed.Fixed
+    );
+  });
+});

package/src/alert-severity.ts

@@ -16,10 +16,9 @@
  * - Component selectors: `getAlertBadgeComponent` and
  *   `getAlertTwotoneComponent` resolve the badge/icon element tag for a
  *   severity.
- * - Blinking: `supportsBlinking` reports whether a severity blinks,
- *   `getAlertBlinkMode` resolves its blink mode, and
- *   `getBamAlertTypeForBlinking` maps level severities onto the legacy type used
- *   by the bridge alert management (BAM) blink machinery.
+ * - Flashing: `resolveFlashingSpeed` maps a severity and phase onto the
+ *   design tempo table, and `getBamAlertTypeForBlinking` maps level
+ *   severities onto the legacy type that selects the icon glyphs.
  * - Acknowledgement & filtering: `requiresAcknowledgement` reports whether a
  *   severity needs an ACK action, `excludedFromUnackedFilter` reports whether
  *   it is hidden from the "unacked" view, and `usesAlarmNoAckIcon` selects the
@@ -45,7 +44,12 @@
  * );
  * ```
  */
-import {AlertType, ALERT_SEVERITY_PRIORITY} from './types.js';
+import {
+  AlertType,
+  ALERT_SEVERITY_PRIORITY,
+  FlashingSpeed,
+  type ResolvedFlashingSpeed,
+} from './types.js';
 
 export {ALERT_SEVERITY_PRIORITY};
 
@@ -74,22 +78,44 @@ export function requiresAcknowledgement(type: AlertType): boolean {
   ].includes(type);
 }
 
-export function supportsBlinking(
+export enum AlertFlashPhase {
+  Active = 'active',
+  Rectified = 'rectified',
+}
+
+/**
+ * Resolves the `default` flashing speed from the design tempo table (#1224):
+ * active critical/alarm/high flash fast, warning/medium slow, low very slow;
+ * every rectified alert flashes very slow; caution and diagnostic never
+ * flash. Callers map acknowledged alerts to `fixed` before asking.
+ */
+export function resolveFlashingSpeed(
+  speed: FlashingSpeed,
   type: AlertType,
-  acknowledged: boolean
-): boolean {
-  if (acknowledged) {
-    return false;
+  phase: AlertFlashPhase = AlertFlashPhase.Active
+): ResolvedFlashingSpeed {
+  if (speed !== FlashingSpeed.Default) {
+    return speed;
+  }
+  if (type === AlertType.Caution || type === AlertType.LevelDiagnostic) {
+    return FlashingSpeed.Fixed;
+  }
+  if (phase === AlertFlashPhase.Rectified) {
+    return FlashingSpeed.VerySlow;
+  }
+  switch (type) {
+    case AlertType.LevelCritical:
+    case AlertType.Alarm:
+    case AlertType.LevelHigh:
+      return FlashingSpeed.Fast;
+    case AlertType.Warning:
+    case AlertType.LevelMedium:
+      return FlashingSpeed.Slow;
+    case AlertType.LevelLow:
+      return FlashingSpeed.VerySlow;
+    default:
+      return FlashingSpeed.Fixed;
   }
-
-  return [
-    AlertType.Alarm,
-    AlertType.Warning,
-    AlertType.LevelCritical,
-    AlertType.LevelHigh,
-    AlertType.LevelMedium,
-    AlertType.LevelLow,
-  ].includes(type);
 }
 
 export function getAlertSeverityCssClass(type: AlertType): string {
@@ -183,30 +209,6 @@ export function getAlertTwotoneComponent(
   }
 }
 
-export enum AlertBlinkMode {
-  Critical = 'critical',
-  Alarm = 'alarm',
-  Warning = 'warning',
-  Low = 'low',
-}
-
-export function getAlertBlinkMode(type: AlertType): AlertBlinkMode {
-  switch (type) {
-    case AlertType.LevelCritical:
-      return AlertBlinkMode.Critical;
-    case AlertType.Warning:
-    case AlertType.LevelMedium:
-      return AlertBlinkMode.Warning;
-    case AlertType.Caution:
-    case AlertType.LevelLow:
-      return AlertBlinkMode.Low;
-    case AlertType.Alarm:
-    case AlertType.LevelHigh:
-    default:
-      return AlertBlinkMode.Alarm;
-  }
-}
-
 export function getBamAlertTypeForBlinking(type: AlertType): AlertType {
   switch (type) {
     case AlertType.LevelCritical:

package/src/bars-graphs/area-graph/area-graph.stories.ts

@@ -1,4 +1,4 @@
-import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import type {Args, Meta, StoryObj} from '@storybook/web-components-vite';
 import {html} from 'lit';
 import type {ObcAreaGraph} from './area-graph.js';
 import './area-graph.js';
@@ -91,6 +91,7 @@ const meta: Meta = {
       .showGridX=${_args.showGridX}
       .showGridY=${_args.showGridY}
       .showTickMarks=${_args.showTickMarks}
+      .rangeLabels=${_args.rangeLabels}
       .xTicksLimit=${_args.xTicksLimit}
       .xStepSize=${_args.xStepSize}
       .yTicksLimit=${_args.yTicksLimit}
@@ -121,6 +122,10 @@ const meta: Meta = {
     showGridX: {control: 'boolean'},
     showGridY: {control: 'boolean'},
     showTickMarks: {control: 'boolean'},
+    rangeLabels: {
+      control: {type: 'radio'},
+      options: ['none', 'y', 'x', 'xy'],
+    },
     xTicksLimit: {control: {type: 'number'}},
     xStepSize: {control: {type: 'number'}},
     yTicksLimit: {control: {type: 'number'}},
@@ -154,6 +159,7 @@ const meta: Meta = {
     showGridX: true, // Component defaults to false, but stories show grid by default
     showGridY: true, // Component defaults to false, but stories show grid by default
     showTickMarks: true, // Component defaults to false, but stories show tick marks by default
+    rangeLabels: 'none',
     xTicksLimit: undefined,
     xStepSize: undefined,
     yTicksLimit: undefined,
@@ -259,6 +265,67 @@ export const NumberAxis: Story = {
   `,
 };
 
+/**
+ * Five of the twelve minutes have arrived. Without `xAxis` the trace would
+ * stretch across the full width; pinned, it occupies the right-hand slice
+ * and grows leftwards as the buffer fills (#1218).
+ */
+const PINNED_X_RANGE_DATA = [-4, -3, -2, -1, 0].map((x, i) => ({
+  x,
+  value: SAMPLE_DATA[i].value,
+}));
+
+export const PinnedXRange: Story = {
+  name: 'Pinned X Range (Filling Buffer)',
+  args: {
+    xAxisType: 'number',
+    height: 220,
+  },
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    const chart = canvasElement.querySelector('obc-area-graph') as
+      | (HTMLElement & {chart?: {update(): void}})
+      | null;
+    chart?.chart?.update();
+  },
+  render: (_args) => html`
+    <obc-area-graph
+      .data=${PINNED_X_RANGE_DATA}
+      .xAxisType=${_args.xAxisType}
+      .xAxis=${{min: -12, max: 0}}
+      .yAxes=${[{id: 'y', position: 'left' as const, min: 0, max: 8}]}
+      .fillMode=${_args.fillMode}
+      .lineMode=${_args.lineMode}
+      .showGrid=${_args.showGrid}
+      .showGridX=${_args.showGridX}
+      .showGridY=${_args.showGridY}
+      .priority=${_args.priority}
+      .showDebugOverlay=${_args.showDebugOverlay}
+      .width=${_args.width}
+      .height=${_args.height}
+    >
+      <obc-bar-vertical
+        slot="left-scale"
+        side="left"
+        .height=${_args.height}
+        .primaryTickmarkInterval=${2}
+        .secondaryTickmarkInterval=${1}
+        .hasBar=${false}
+        .priority=${_args.priority}
+      ></obc-bar-vertical>
+      <obc-bar-horizontal
+        slot="bottom-scale"
+        side="bottom"
+        .width=${_args.width}
+        .primaryTickmarkInterval=${2}
+        .secondaryTickmarkInterval=${1}
+        .hasBar=${false}
+        .priority=${_args.priority}
+      ></obc-bar-horizontal>
+    </obc-area-graph>
+  `,
+};
+
 export const SemitransparentExternalScales: Story = {
   name: 'Semitransparent Area Graph (with external scales)',
   tags: ['skip-test'],
@@ -452,6 +519,79 @@ export const SemitransparentExternalScales: Story = {
   `,
 };
 
+/**
+ * Two identical configurations fed data forty times apart. Their
+ * frames must line up exactly — a drift between them means the plot rectangle
+ * has started following the data again (#1214).
+ */
+const FIXED_FRAME_SHALLOW = SAMPLE_DATA.map((p, i) => ({x: i, value: p.value}));
+const FIXED_FRAME_DEEP = SAMPLE_DATA.map((p, i) => ({
+  x: i,
+  value: p.value * 40,
+}));
+
+const renderFixedFrameChart = (
+  _args: Args,
+  data: {x: number; value: number}[]
+) => html`
+  <obc-area-graph
+    .data=${data}
+    .xAxisType=${'number'}
+    .yAxes=${[{id: 'y', position: 'left' as const, min: 0, max: 300}]}
+    .fillMode=${_args.fillMode}
+    .lineMode=${_args.lineMode}
+    .showGrid=${_args.showGrid}
+    .showGridX=${_args.showGridX}
+    .showGridY=${_args.showGridY}
+    .priority=${_args.priority}
+    .rangeLabels=${_args.rangeLabels}
+    .showDebugOverlay=${_args.showDebugOverlay}
+    .width=${_args.width}
+    .height=${_args.height}
+  >
+    <obc-bar-vertical
+      slot="left-scale"
+      side="left"
+      .height=${_args.height}
+      .primaryTickmarkInterval=${100}
+      .secondaryTickmarkInterval=${50}
+      .hasBar=${false}
+      .priority=${_args.priority}
+    ></obc-bar-vertical>
+    <obc-bar-horizontal
+      slot="bottom-scale"
+      side="bottom"
+      .width=${_args.width}
+      .primaryTickmarkInterval=${2}
+      .secondaryTickmarkInterval=${1}
+      .hasBar=${false}
+      .priority=${_args.priority}
+    ></obc-bar-horizontal>
+  </obc-area-graph>
+`;
+
+export const FixedFrame: Story = {
+  name: 'Fixed Frame (Pinned Range With External Scales)',
+  args: {
+    width: 480,
+    height: 220,
+  },
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    canvasElement
+      .querySelectorAll('obc-area-graph')
+      .forEach((chart) =>
+        (chart as HTMLElement & {chart?: {update(): void}}).chart?.update()
+      );
+  },
+  render: (_args) => html`
+    <div style="display: flex; flex-direction: column; gap: 16px;">
+      ${renderFixedFrameChart(_args, FIXED_FRAME_SHALLOW)}
+      ${renderFixedFrameChart(_args, FIXED_FRAME_DEEP)}
+    </div>
+  `,
+};
+
 export const WithPoints: Story = {
   name: 'With Points Area Graph',
   args: {
@@ -515,6 +655,24 @@ export const MinHeight: Story = {
   },
 };
 
+export const MinHeightRangeLabels: Story = {
+  name: 'Minimal Height With Range Labels (48px)',
+  args: {
+    width: 120,
+    height: 48,
+    rangeLabels: 'xy',
+  },
+};
+
+export const BelowThresholdRangeLabels: Story = {
+  name: 'Below Threshold With Range Labels (191px, Y Only)',
+  args: {
+    width: 288,
+    height: 191,
+    rangeLabels: 'y',
+  },
+};
+
 export const ThresholdHeightSize: Story = {
   name: 'Threshold Height Area Graph (192px, where labels appear)',
   args: {
@@ -702,3 +860,79 @@ export const RealtimeShifting: Story = {
     return chart;
   },
 };
+
+export const RealtimeFixedFrame: Story = {
+  name: 'Realtime (Fixed Frame)',
+  tags: ['skip-test'],
+  render: (_args) => {
+    const chart = document.createElement('obc-area-graph');
+    chart.showDebugOverlay = _args.showDebugOverlay;
+    chart.width = _args.width;
+    chart.height = _args.height;
+    chart.priority = _args.priority;
+    chart.rangeLabels = _args.rangeLabels;
+
+    // A slotted horizontal scale labels raw axis values, so the x axis carries
+    // minutes-ago rather than epoch milliseconds (#1219).
+    chart.xAxisType = 'number';
+
+    // The pinned range is what holds the frame still: fixed labels give the
+    // scale a fixed thickness, so the plot rectangle stops following the data.
+    chart.yAxes = [{id: 'y', position: 'left', min: 0, max: 10}];
+
+    const verticalScale = document.createElement('obc-bar-vertical');
+    verticalScale.slot = 'left-scale';
+    verticalScale.side = 'left';
+    verticalScale.height = _args.height;
+    verticalScale.primaryTickmarkInterval = 2;
+    verticalScale.secondaryTickmarkInterval = 1;
+    verticalScale.hasBar = false;
+    verticalScale.priority = _args.priority;
+    chart.appendChild(verticalScale);
+
+    const horizontalScale = document.createElement('obc-bar-horizontal');
+    horizontalScale.slot = 'bottom-scale';
+    horizontalScale.side = 'bottom';
+    horizontalScale.width = _args.width;
+    horizontalScale.primaryTickmarkInterval = 2;
+    horizontalScale.secondaryTickmarkInterval = 1;
+    horizontalScale.hasBar = false;
+    horizontalScale.priority = _args.priority;
+    chart.appendChild(horizontalScale);
+
+    const windowMinutes = 12;
+
+    // The window is declared rather than inferred from the data, so the buffer
+    // starts empty and fills into the right-hand slice instead of stretching
+    // across the full width (#1218).
+    chart.xAxis = {min: -(windowMinutes - 1), max: 0};
+
+    // Values roam the whole range, unlike Realtime (Shifting) which repeats a
+    // fixed set: here the frame holds because both ranges are pinned.
+    const nextValue = () => Math.random() * 10;
+
+    let values: number[] = [];
+    const publish = () => {
+      chart.data = values.map((value, i) => ({
+        x: i - (values.length - 1),
+        value,
+      }));
+    };
+    publish();
+
+    const interval = setInterval(() => {
+      values = [...values, nextValue()].slice(-windowMinutes);
+      publish();
+    }, 2000);
+
+    const mo = new MutationObserver(() => {
+      if (!document.body.contains(chart)) {
+        clearInterval(interval);
+        mo.disconnect();
+      }
+    });
+    mo.observe(document.body, {childList: true, subtree: true});
+
+    return chart;
+  },
+};