@xpadev-net/niconicomments 0.2.61 → 0.2.62

package/dist/bundle.js

@@ -1,5 +1,5 @@
 /*!
-  niconicomments.js v0.2.61
+  niconicomments.js v0.2.62
   (c) 2021 xpadev-net https://xpadev.net
   Released under the MIT License.
 */
@@ -38,7 +38,7 @@
         plugins = input;
     };
 
-    var index$3 = /*#__PURE__*/Object.freeze({
+    var index$4 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         get imageCache () { return imageCache; },
         get nicoScripts () { return nicoScripts; },
@@ -124,7 +124,7 @@
     }
     NotImplementedError.prototype.name = "NotImplementedError";
 
-    var index$2 = /*#__PURE__*/Object.freeze({
+    var index$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         CanvasRenderingContext2DError: CanvasRenderingContext2DError,
         InvalidFormatError: InvalidFormatError,
@@ -132,7 +132,7 @@
         NotImplementedError: NotImplementedError
     });
 
-    const ArrayPush = (array, key, push) => {
+    const arrayPush = (array, key, push) => {
         if (!array) {
             array = {};
         }
@@ -141,7 +141,7 @@
         }
         array[Number(key)]?.push(push);
     };
-    const ArrayEqual = (a, b) => {
+    const arrayEqual = (a, b) => {
         if (a.length !== b.length)
             return false;
         for (let i = 0, n = a.length; i < n; ++i) {
@@ -206,6 +206,1449 @@
         : config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
     };
 
+    function _iterableToArrayLimit(r, l) {
+      var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+      if (null != t) {
+        var e,
+          n,
+          i,
+          u,
+          a = [],
+          f = !0,
+          o = !1;
+        try {
+          if (i = (t = t.call(r)).next, 0 === l) {
+            if (Object(t) !== t) return;
+            f = !1;
+          } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+        } catch (r) {
+          o = !0, n = r;
+        } finally {
+          try {
+            if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+          } finally {
+            if (o) throw n;
+          }
+        }
+        return a;
+      }
+    }
+    function ownKeys(e, r) {
+      var t = Object.keys(e);
+      if (Object.getOwnPropertySymbols) {
+        var o = Object.getOwnPropertySymbols(e);
+        r && (o = o.filter(function (r) {
+          return Object.getOwnPropertyDescriptor(e, r).enumerable;
+        })), t.push.apply(t, o);
+      }
+      return t;
+    }
+    function _objectSpread2(e) {
+      for (var r = 1; r < arguments.length; r++) {
+        var t = null != arguments[r] ? arguments[r] : {};
+        r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+          _defineProperty(e, r, t[r]);
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+          Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+        });
+      }
+      return e;
+    }
+    function _typeof(o) {
+      "@babel/helpers - typeof";
+
+      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+        return typeof o;
+      } : function (o) {
+        return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+      }, _typeof(o);
+    }
+    function _classCallCheck(instance, Constructor) {
+      if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+      }
+    }
+    function _defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+      }
+    }
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      Object.defineProperty(Constructor, "prototype", {
+        writable: false
+      });
+      return Constructor;
+    }
+    function _defineProperty(obj, key, value) {
+      key = _toPropertyKey(key);
+      if (key in obj) {
+        Object.defineProperty(obj, key, {
+          value: value,
+          enumerable: true,
+          configurable: true,
+          writable: true
+        });
+      } else {
+        obj[key] = value;
+      }
+      return obj;
+    }
+    function _inherits(subClass, superClass) {
+      if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+      }
+      subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+          value: subClass,
+          writable: true,
+          configurable: true
+        }
+      });
+      Object.defineProperty(subClass, "prototype", {
+        writable: false
+      });
+      if (superClass) _setPrototypeOf(subClass, superClass);
+    }
+    function _getPrototypeOf(o) {
+      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+      };
+      return _getPrototypeOf(o);
+    }
+    function _setPrototypeOf(o, p) {
+      _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+      };
+      return _setPrototypeOf(o, p);
+    }
+    function _isNativeReflectConstruct() {
+      if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+      if (Reflect.construct.sham) return false;
+      if (typeof Proxy === "function") return true;
+      try {
+        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+    function _construct(Parent, args, Class) {
+      if (_isNativeReflectConstruct()) {
+        _construct = Reflect.construct.bind();
+      } else {
+        _construct = function _construct(Parent, args, Class) {
+          var a = [null];
+          a.push.apply(a, args);
+          var Constructor = Function.bind.apply(Parent, a);
+          var instance = new Constructor();
+          if (Class) _setPrototypeOf(instance, Class.prototype);
+          return instance;
+        };
+      }
+      return _construct.apply(null, arguments);
+    }
+    function _isNativeFunction(fn) {
+      try {
+        return Function.toString.call(fn).indexOf("[native code]") !== -1;
+      } catch (e) {
+        return typeof fn === "function";
+      }
+    }
+    function _wrapNativeSuper(Class) {
+      var _cache = typeof Map === "function" ? new Map() : undefined;
+      _wrapNativeSuper = function _wrapNativeSuper(Class) {
+        if (Class === null || !_isNativeFunction(Class)) return Class;
+        if (typeof Class !== "function") {
+          throw new TypeError("Super expression must either be null or a function");
+        }
+        if (typeof _cache !== "undefined") {
+          if (_cache.has(Class)) return _cache.get(Class);
+          _cache.set(Class, Wrapper);
+        }
+        function Wrapper() {
+          return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+        }
+        Wrapper.prototype = Object.create(Class.prototype, {
+          constructor: {
+            value: Wrapper,
+            enumerable: false,
+            writable: true,
+            configurable: true
+          }
+        });
+        return _setPrototypeOf(Wrapper, Class);
+      };
+      return _wrapNativeSuper(Class);
+    }
+    function _assertThisInitialized(self) {
+      if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+      }
+      return self;
+    }
+    function _possibleConstructorReturn(self, call) {
+      if (call && (typeof call === "object" || typeof call === "function")) {
+        return call;
+      } else if (call !== void 0) {
+        throw new TypeError("Derived constructors may only return object or undefined");
+      }
+      return _assertThisInitialized(self);
+    }
+    function _createSuper(Derived) {
+      var hasNativeReflectConstruct = _isNativeReflectConstruct();
+      return function _createSuperInternal() {
+        var Super = _getPrototypeOf(Derived),
+          result;
+        if (hasNativeReflectConstruct) {
+          var NewTarget = _getPrototypeOf(this).constructor;
+          result = Reflect.construct(Super, arguments, NewTarget);
+        } else {
+          result = Super.apply(this, arguments);
+        }
+        return _possibleConstructorReturn(this, result);
+      };
+    }
+    function _slicedToArray(arr, i) {
+      return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+    }
+    function _arrayWithHoles(arr) {
+      if (Array.isArray(arr)) return arr;
+    }
+    function _unsupportedIterableToArray(o, minLen) {
+      if (!o) return;
+      if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+      var n = Object.prototype.toString.call(o).slice(8, -1);
+      if (n === "Object" && o.constructor) n = o.constructor.name;
+      if (n === "Map" || n === "Set") return Array.from(o);
+      if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+    }
+    function _arrayLikeToArray(arr, len) {
+      if (len == null || len > arr.length) len = arr.length;
+      for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+      return arr2;
+    }
+    function _nonIterableRest() {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    function _createForOfIteratorHelper(o, allowArrayLike) {
+      var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+      if (!it) {
+        if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+          if (it) o = it;
+          var i = 0;
+          var F = function () {};
+          return {
+            s: F,
+            n: function () {
+              if (i >= o.length) return {
+                done: true
+              };
+              return {
+                done: false,
+                value: o[i++]
+              };
+            },
+            e: function (e) {
+              throw e;
+            },
+            f: F
+          };
+        }
+        throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+      }
+      var normalCompletion = true,
+        didErr = false,
+        err;
+      return {
+        s: function () {
+          it = it.call(o);
+        },
+        n: function () {
+          var step = it.next();
+          normalCompletion = step.done;
+          return step;
+        },
+        e: function (e) {
+          didErr = true;
+          err = e;
+        },
+        f: function () {
+          try {
+            if (!normalCompletion && it.return != null) it.return();
+          } finally {
+            if (didErr) throw err;
+          }
+        }
+      };
+    }
+    function _toPrimitive(input, hint) {
+      if (typeof input !== "object" || input === null) return input;
+      var prim = input[Symbol.toPrimitive];
+      if (prim !== undefined) {
+        var res = prim.call(input, hint || "default");
+        if (typeof res !== "object") return res;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+      }
+      return (hint === "string" ? String : Number)(input);
+    }
+    function _toPropertyKey(arg) {
+      var key = _toPrimitive(arg, "string");
+      return typeof key === "symbol" ? key : String(key);
+    }
+
+    // src/error/ValiError/ValiError.ts
+    var ValiError = /*#__PURE__*/function (_Error) {
+      _inherits(ValiError, _Error);
+      var _super = _createSuper(ValiError);
+      /**
+       * Creates a Valibot error with useful information.
+       *
+       * @param issues The error issues.
+       */
+      function ValiError(issues) {
+        var _this;
+        _classCallCheck(this, ValiError);
+        _this = _super.call(this, issues[0].message);
+        _defineProperty(_assertThisInitialized(_this), "issues", void 0);
+        _this.name = "ValiError";
+        _this.issues = issues;
+        return _this;
+      }
+      return _createClass(ValiError);
+    }( /*#__PURE__*/_wrapNativeSuper(Error));
+
+    // src/utils/getIssues/getIssues.ts
+    function getIssues(issues) {
+      return {
+        issues: issues
+      };
+    }
+
+    // src/utils/getOutput/getOutput.ts
+    function getOutput(output) {
+      return {
+        output: output
+      };
+    }
+
+    // src/utils/executePipe/utils/getIssue/getIssue.ts
+    function getIssue(info, issue) {
+      return {
+        reason: info === null || info === void 0 ? void 0 : info.reason,
+        validation: issue.validation,
+        origin: (info === null || info === void 0 ? void 0 : info.origin) || "value",
+        message: issue.message,
+        input: issue.input,
+        path: issue.path,
+        abortEarly: info === null || info === void 0 ? void 0 : info.abortEarly,
+        abortPipeEarly: info === null || info === void 0 ? void 0 : info.abortPipeEarly,
+        skipPipe: info === null || info === void 0 ? void 0 : info.skipPipe
+      };
+    }
+
+    // src/utils/executePipe/utils/getPipeInfo/getPipeInfo.ts
+    function getPipeInfo(info, reason) {
+      return {
+        reason: reason,
+        origin: info === null || info === void 0 ? void 0 : info.origin,
+        abortEarly: info === null || info === void 0 ? void 0 : info.abortEarly,
+        abortPipeEarly: info === null || info === void 0 ? void 0 : info.abortPipeEarly,
+        skipPipe: info === null || info === void 0 ? void 0 : info.skipPipe
+      };
+    }
+
+    // src/utils/executePipe/executePipe.ts
+    function executePipe(input, pipe, parseInfo, reason) {
+      if (!pipe || !pipe.length || parseInfo !== null && parseInfo !== void 0 && parseInfo.skipPipe) {
+        return getOutput(input);
+      }
+      var pipeInfo;
+      var issues;
+      var output = input;
+      var _iterator = _createForOfIteratorHelper(pipe),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var action = _step.value;
+          var result = action(output);
+          if (result.issues) {
+            pipeInfo = pipeInfo || getPipeInfo(parseInfo, reason);
+            var _iterator2 = _createForOfIteratorHelper(result.issues),
+              _step2;
+            try {
+              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                var issueInfo = _step2.value;
+                var issue = getIssue(pipeInfo, issueInfo);
+                issues ? issues.push(issue) : issues = [issue];
+              }
+            } catch (err) {
+              _iterator2.e(err);
+            } finally {
+              _iterator2.f();
+            }
+            if (pipeInfo.abortEarly || pipeInfo.abortPipeEarly) {
+              break;
+            }
+          } else {
+            output = result.output;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return issues ? getIssues(issues) : getOutput(output);
+    }
+    function getDefaultArgs(arg1, arg2) {
+      return Array.isArray(arg1) ? [void 0, arg1] : [arg1, arg2];
+    }
+
+    // src/utils/getErrorMessage/getErrorMessage.ts
+    function getErrorMessage(error) {
+      return typeof error === "function" ? error() : error;
+    }
+
+    // src/utils/getPipeIssues/getPipeIssues.ts
+    function getPipeIssues(validation, error, input) {
+      return getIssues([{
+        validation: validation,
+        message: getErrorMessage(error),
+        input: input
+      }]);
+    }
+
+    // src/utils/getRestAndDefaultArgs/getRestAndDefaultArgs.ts
+    function getRestAndDefaultArgs(arg1, arg2, arg3) {
+      if (!arg1 || _typeof(arg1) === "object" && !Array.isArray(arg1)) {
+        var _getDefaultArgs = getDefaultArgs(arg2, arg3),
+          _getDefaultArgs2 = _slicedToArray(_getDefaultArgs, 2),
+          error2 = _getDefaultArgs2[0],
+          pipe2 = _getDefaultArgs2[1];
+        return [arg1, error2, pipe2];
+      }
+      var _getDefaultArgs3 = getDefaultArgs(arg1, arg2),
+        _getDefaultArgs4 = _slicedToArray(_getDefaultArgs3, 2),
+        error = _getDefaultArgs4[0],
+        pipe = _getDefaultArgs4[1];
+      return [void 0, error, pipe];
+    }
+
+    // src/utils/getSchemaIssues/getSchemaIssues.ts
+    function getSchemaIssues(info, reason, validation, error, input, issues) {
+      return {
+        issues: [{
+          reason: reason,
+          validation: validation,
+          origin: (info === null || info === void 0 ? void 0 : info.origin) || "value",
+          message: getErrorMessage(error),
+          input: input,
+          issues: issues,
+          abortEarly: info === null || info === void 0 ? void 0 : info.abortEarly,
+          abortPipeEarly: info === null || info === void 0 ? void 0 : info.abortPipeEarly,
+          skipPipe: info === null || info === void 0 ? void 0 : info.skipPipe
+        }]
+      };
+    }
+    function is(schema, input) {
+      return !schema._parse(input, {
+        abortEarly: true
+      }).issues;
+    }
+
+    // src/schemas/array/array.ts
+    function array(item, arg2, arg3) {
+      var _getDefaultArgs5 = getDefaultArgs(arg2, arg3),
+        _getDefaultArgs6 = _slicedToArray(_getDefaultArgs5, 2),
+        error = _getDefaultArgs6[0],
+        pipe = _getDefaultArgs6[1];
+      return {
+        /**
+         * The schema type.
+         */
+        type: "array",
+        /**
+         * The item schema.
+         */
+        item: item,
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (!Array.isArray(input)) {
+            return getSchemaIssues(info, "type", "array", error || "Invalid type", input);
+          }
+          var issues;
+          var output = [];
+          for (var key = 0; key < input.length; key++) {
+            var value2 = input[key];
+            var result = item._parse(value2, info);
+            if (result.issues) {
+              var pathItem = {
+                type: "array",
+                input: input,
+                key: key,
+                value: value2
+              };
+              var _iterator3 = _createForOfIteratorHelper(result.issues),
+                _step3;
+              try {
+                for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+                  var _issues;
+                  var issue = _step3.value;
+                  if (issue.path) {
+                    issue.path.unshift(pathItem);
+                  } else {
+                    issue.path = [pathItem];
+                  }
+                  (_issues = issues) === null || _issues === void 0 || _issues.push(issue);
+                }
+              } catch (err) {
+                _iterator3.e(err);
+              } finally {
+                _iterator3.f();
+              }
+              if (!issues) {
+                issues = result.issues;
+              }
+              if (info !== null && info !== void 0 && info.abortEarly) {
+                break;
+              }
+            } else {
+              output.push(result.output);
+            }
+          }
+          return issues ? getIssues(issues) : executePipe(output, pipe, info, "array");
+        }
+      };
+    }
+
+    // src/schemas/boolean/boolean.ts
+    function _boolean(arg1, arg2) {
+      var _getDefaultArgs17 = getDefaultArgs(arg1, arg2),
+        _getDefaultArgs18 = _slicedToArray(_getDefaultArgs17, 2),
+        error = _getDefaultArgs18[0],
+        pipe = _getDefaultArgs18[1];
+      return {
+        /**
+         * The schema type.
+         */
+        type: "boolean",
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (typeof input !== "boolean") {
+            return getSchemaIssues(info, "type", "boolean", error || "Invalid type", input);
+          }
+          return executePipe(input, pipe, info, "boolean");
+        }
+      };
+    }
+
+    // src/schemas/intersect/utils/mergeOutputs/mergeOutputs.ts
+    function mergeOutputs(output1, output2) {
+      if (_typeof(output1) === _typeof(output2)) {
+        if (output1 === output2 || output1 instanceof Date && output2 instanceof Date && +output1 === +output2) {
+          return getOutput(output1);
+        }
+        if (Array.isArray(output1) && Array.isArray(output2)) {
+          if (output1.length === output2.length) {
+            var array2 = [];
+            for (var index = 0; index < output1.length; index++) {
+              var result = mergeOutputs(output1[index], output2[index]);
+              if (result.invalid) {
+                return result;
+              }
+              array2.push(result.output);
+            }
+            return getOutput(array2);
+          }
+          return {
+            invalid: true
+          };
+        }
+        if (output1 && output2 && output1.constructor === Object && output2.constructor === Object) {
+          var object2 = _objectSpread2(_objectSpread2({}, output1), output2);
+          for (var key in output1) {
+            if (key in output2) {
+              var _result = mergeOutputs(output1[key], output2[key]);
+              if (_result.invalid) {
+                return _result;
+              }
+              object2[key] = _result.output;
+            }
+          }
+          return getOutput(object2);
+        }
+      }
+      return {
+        invalid: true
+      };
+    }
+
+    // src/schemas/intersect/intersect.ts
+    function intersect(options, error) {
+      return {
+        /**
+         * The schema type.
+         */
+        type: "intersect",
+        /**
+         * The intersect options.
+         */
+        options: options,
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          var issues;
+          var outputs;
+          var _iterator5 = _createForOfIteratorHelper(options),
+            _step5;
+          try {
+            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+              var schema = _step5.value;
+              var _result2 = schema._parse(input, info);
+              if (_result2.issues) {
+                if (issues) {
+                  var _iterator6 = _createForOfIteratorHelper(_result2.issues),
+                    _step6;
+                  try {
+                    for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                      var issue = _step6.value;
+                      issues.push(issue);
+                    }
+                  } catch (err) {
+                    _iterator6.e(err);
+                  } finally {
+                    _iterator6.f();
+                  }
+                } else {
+                  issues = _result2.issues;
+                }
+                if (info !== null && info !== void 0 && info.abortEarly) {
+                  break;
+                }
+              } else {
+                if (outputs) {
+                  outputs.push(_result2.output);
+                } else {
+                  outputs = [_result2.output];
+                }
+              }
+            }
+          } catch (err) {
+            _iterator5.e(err);
+          } finally {
+            _iterator5.f();
+          }
+          if (issues) {
+            return getIssues(issues);
+          }
+          var output = outputs[0];
+          for (var index = 1; index < outputs.length; index++) {
+            var result = mergeOutputs(output, outputs[index]);
+            if (result.invalid) {
+              return getSchemaIssues(info, "type", "intersect", error || "Invalid type", input);
+            }
+            output = result.output;
+          }
+          return getOutput(output);
+        }
+      };
+    }
+
+    // src/schemas/literal/literal.ts
+    function literal(literal2, error) {
+      return {
+        /**
+         * The schema type.
+         */
+        type: "literal",
+        /**
+         * The literal value.
+         */
+        literal: literal2,
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (input !== literal2) {
+            return getSchemaIssues(info, "type", "literal", error || "Invalid type", input);
+          }
+          return getOutput(input);
+        }
+      };
+    }
+
+    // src/schemas/nullable/nullable.ts
+    function nullable(wrapped, default_) {
+      return {
+        /**
+         * The schema type.
+         */
+        type: "nullable",
+        /**
+         * The wrapped schema.
+         */
+        wrapped: wrapped,
+        /**
+         * Returns the default value.
+         */
+        getDefault: function getDefault() {
+          return typeof default_ === "function" ? default_() : default_;
+        },
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (input === null) {
+            var override = this.getDefault();
+            if (override === void 0) {
+              return getOutput(input);
+            }
+            input = override;
+          }
+          return wrapped._parse(input, info);
+        }
+      };
+    }
+
+    // src/schemas/number/number.ts
+    function number(arg1, arg2) {
+      var _getDefaultArgs33 = getDefaultArgs(arg1, arg2),
+        _getDefaultArgs34 = _slicedToArray(_getDefaultArgs33, 2),
+        error = _getDefaultArgs34[0],
+        pipe = _getDefaultArgs34[1];
+      return {
+        /**
+         * The schema type.
+         */
+        type: "number",
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (typeof input !== "number" || isNaN(input)) {
+            return getSchemaIssues(info, "type", "number", error || "Invalid type", input);
+          }
+          return executePipe(input, pipe, info, "number");
+        }
+      };
+    }
+
+    // src/schemas/object/object.ts
+    function object(entries, arg2, arg3, arg4) {
+      var _getRestAndDefaultArg = getRestAndDefaultArgs(arg2, arg3, arg4),
+        _getRestAndDefaultArg2 = _slicedToArray(_getRestAndDefaultArg, 3),
+        rest = _getRestAndDefaultArg2[0],
+        error = _getRestAndDefaultArg2[1],
+        pipe = _getRestAndDefaultArg2[2];
+      var cachedEntries;
+      return {
+        /**
+         * The schema type.
+         */
+        type: "object",
+        /**
+         * The entries schema.
+         */
+        entries: entries,
+        /**
+         * The rest schema.
+         */
+        rest: rest,
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (!input || _typeof(input) !== "object") {
+            return getSchemaIssues(info, "type", "object", error || "Invalid type", input);
+          }
+          cachedEntries = cachedEntries || Object.entries(entries);
+          var issues;
+          var output = {};
+          var _iterator11 = _createForOfIteratorHelper(cachedEntries),
+            _step11;
+          try {
+            for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+              var _step11$value = _slicedToArray(_step11.value, 2),
+                _key3 = _step11$value[0],
+                schema = _step11$value[1];
+              var _value = input[_key3];
+              var _result3 = schema._parse(_value, info);
+              if (_result3.issues) {
+                var _pathItem = {
+                  type: "object",
+                  input: input,
+                  key: _key3,
+                  value: _value
+                };
+                var _iterator13 = _createForOfIteratorHelper(_result3.issues),
+                  _step13;
+                try {
+                  for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+                    var _issues7;
+                    var _issue2 = _step13.value;
+                    if (_issue2.path) {
+                      _issue2.path.unshift(_pathItem);
+                    } else {
+                      _issue2.path = [_pathItem];
+                    }
+                    (_issues7 = issues) === null || _issues7 === void 0 || _issues7.push(_issue2);
+                  }
+                } catch (err) {
+                  _iterator13.e(err);
+                } finally {
+                  _iterator13.f();
+                }
+                if (!issues) {
+                  issues = _result3.issues;
+                }
+                if (info !== null && info !== void 0 && info.abortEarly) {
+                  break;
+                }
+              } else if (_result3.output !== void 0 || _key3 in input) {
+                output[_key3] = _result3.output;
+              }
+            }
+          } catch (err) {
+            _iterator11.e(err);
+          } finally {
+            _iterator11.f();
+          }
+          if (rest && !(info !== null && info !== void 0 && info.abortEarly && issues)) {
+            for (var key in input) {
+              if (!(key in entries)) {
+                var value2 = input[key];
+                var result = rest._parse(value2, info);
+                if (result.issues) {
+                  var pathItem = {
+                    type: "object",
+                    input: input,
+                    key: key,
+                    value: value2
+                  };
+                  var _iterator12 = _createForOfIteratorHelper(result.issues),
+                    _step12;
+                  try {
+                    for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+                      var _issues6;
+                      var issue = _step12.value;
+                      if (issue.path) {
+                        issue.path.unshift(pathItem);
+                      } else {
+                        issue.path = [pathItem];
+                      }
+                      (_issues6 = issues) === null || _issues6 === void 0 || _issues6.push(issue);
+                    }
+                  } catch (err) {
+                    _iterator12.e(err);
+                  } finally {
+                    _iterator12.f();
+                  }
+                  if (!issues) {
+                    issues = result.issues;
+                  }
+                  if (info !== null && info !== void 0 && info.abortEarly) {
+                    break;
+                  }
+                } else {
+                  output[key] = result.output;
+                }
+              }
+            }
+          }
+          return issues ? getIssues(issues) : executePipe(output, pipe, info, "object");
+        }
+      };
+    }
+
+    // src/schemas/optional/optional.ts
+    function optional(wrapped, default_) {
+      return {
+        /**
+         * The schema type.
+         */
+        type: "optional",
+        /**
+         * The wrapped schema.
+         */
+        wrapped: wrapped,
+        /**
+         * Returns the default value.
+         */
+        getDefault: function getDefault() {
+          return typeof default_ === "function" ? default_() : default_;
+        },
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (input === void 0) {
+            var override = this.getDefault();
+            if (override === void 0) {
+              return getOutput(input);
+            }
+            input = override;
+          }
+          return wrapped._parse(input, info);
+        }
+      };
+    }
+
+    // src/schemas/string/string.ts
+    function string(arg1, arg2) {
+      var _getDefaultArgs37 = getDefaultArgs(arg1, arg2),
+        _getDefaultArgs38 = _slicedToArray(_getDefaultArgs37, 2),
+        error = _getDefaultArgs38[0],
+        pipe = _getDefaultArgs38[1];
+      return {
+        /**
+         * The schema type.
+         */
+        type: "string",
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (typeof input !== "string") {
+            return getSchemaIssues(info, "type", "string", error || "Invalid type", input);
+          }
+          return executePipe(input, pipe, info, "string");
+        }
+      };
+    }
+
+    // src/schemas/record/utils/getRecordArgs/getRecordArgs.ts
+    function getRecordArgs(arg1, arg2, arg3, arg4) {
+      if (_typeof(arg2) === "object" && !Array.isArray(arg2)) {
+        var _getDefaultArgs41 = getDefaultArgs(arg3, arg4),
+          _getDefaultArgs42 = _slicedToArray(_getDefaultArgs41, 2),
+          error2 = _getDefaultArgs42[0],
+          pipe2 = _getDefaultArgs42[1];
+        return [arg1, arg2, error2, pipe2];
+      }
+      var _getDefaultArgs43 = getDefaultArgs(arg2, arg3),
+        _getDefaultArgs44 = _slicedToArray(_getDefaultArgs43, 2),
+        error = _getDefaultArgs44[0],
+        pipe = _getDefaultArgs44[1];
+      return [string(), arg1, error, pipe];
+    }
+
+    // src/schemas/record/values.ts
+    var BLOCKED_KEYS = ["__proto__", "prototype", "constructor"];
+
+    // src/schemas/record/record.ts
+    function record(arg1, arg2, arg3, arg4) {
+      var _getRecordArgs = getRecordArgs(arg1, arg2, arg3, arg4),
+        _getRecordArgs2 = _slicedToArray(_getRecordArgs, 4),
+        key = _getRecordArgs2[0],
+        value2 = _getRecordArgs2[1],
+        error = _getRecordArgs2[2],
+        pipe = _getRecordArgs2[3];
+      return {
+        /**
+         * The schema type.
+         */
+        type: "record",
+        /**
+         * The key schema.
+         */
+        key: key,
+        /**
+         * The value schema.
+         */
+        value: value2,
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          if (!input || _typeof(input) !== "object") {
+            return getSchemaIssues(info, "type", "record", error || "Invalid type", input);
+          }
+          var issues;
+          var output = {};
+          for (var _i = 0, _Object$entries = Object.entries(input); _i < _Object$entries.length; _i++) {
+            var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+              inputKey = _Object$entries$_i[0],
+              inputValue = _Object$entries$_i[1];
+            if (!BLOCKED_KEYS.includes(inputKey)) {
+              var pathItem = void 0;
+              var keyResult = key._parse(inputKey, {
+                origin: "key",
+                abortEarly: info === null || info === void 0 ? void 0 : info.abortEarly,
+                abortPipeEarly: info === null || info === void 0 ? void 0 : info.abortPipeEarly,
+                skipPipe: info === null || info === void 0 ? void 0 : info.skipPipe
+              });
+              if (keyResult.issues) {
+                pathItem = {
+                  type: "record",
+                  input: input,
+                  key: inputKey,
+                  value: inputValue
+                };
+                var _iterator16 = _createForOfIteratorHelper(keyResult.issues),
+                  _step16;
+                try {
+                  for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
+                    var _issues10;
+                    var issue = _step16.value;
+                    issue.path = [pathItem];
+                    (_issues10 = issues) === null || _issues10 === void 0 || _issues10.push(issue);
+                  }
+                } catch (err) {
+                  _iterator16.e(err);
+                } finally {
+                  _iterator16.f();
+                }
+                if (!issues) {
+                  issues = keyResult.issues;
+                }
+                if (info !== null && info !== void 0 && info.abortEarly) {
+                  break;
+                }
+              }
+              var valueResult = value2._parse(inputValue, info);
+              if (valueResult.issues) {
+                pathItem = pathItem || {
+                  type: "record",
+                  input: input,
+                  key: inputKey,
+                  value: inputValue
+                };
+                var _iterator17 = _createForOfIteratorHelper(valueResult.issues),
+                  _step17;
+                try {
+                  for (_iterator17.s(); !(_step17 = _iterator17.n()).done;) {
+                    var _issues11;
+                    var _issue3 = _step17.value;
+                    if (_issue3.path) {
+                      _issue3.path.unshift(pathItem);
+                    } else {
+                      _issue3.path = [pathItem];
+                    }
+                    (_issues11 = issues) === null || _issues11 === void 0 || _issues11.push(_issue3);
+                  }
+                } catch (err) {
+                  _iterator17.e(err);
+                } finally {
+                  _iterator17.f();
+                }
+                if (!issues) {
+                  issues = valueResult.issues;
+                }
+                if (info !== null && info !== void 0 && info.abortEarly) {
+                  break;
+                }
+              }
+              if (!keyResult.issues && !valueResult.issues) {
+                output[keyResult.output] = valueResult.output;
+              }
+            }
+          }
+          return issues ? getIssues(issues) : executePipe(output, pipe, info, "record");
+        }
+      };
+    }
+
+    // src/schemas/union/union.ts
+    function union(options, error) {
+      return {
+        /**
+         * The schema type.
+         */
+        type: "union",
+        /**
+         * The union options.
+         */
+        options: options,
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          var issues;
+          var output;
+          var _iterator26 = _createForOfIteratorHelper(options),
+            _step26;
+          try {
+            for (_iterator26.s(); !(_step26 = _iterator26.n()).done;) {
+              var schema = _step26.value;
+              var result = schema._parse(input, info);
+              if (result.issues) {
+                if (issues) {
+                  var _iterator27 = _createForOfIteratorHelper(result.issues),
+                    _step27;
+                  try {
+                    for (_iterator27.s(); !(_step27 = _iterator27.n()).done;) {
+                      var issue = _step27.value;
+                      issues.push(issue);
+                    }
+                  } catch (err) {
+                    _iterator27.e(err);
+                  } finally {
+                    _iterator27.f();
+                  }
+                } else {
+                  issues = result.issues;
+                }
+              } else {
+                output = [result.output];
+                break;
+              }
+            }
+          } catch (err) {
+            _iterator26.e(err);
+          } finally {
+            _iterator26.f();
+          }
+          return output ? getOutput(output[0]) : getSchemaIssues(info, "type", "union", error || "Invalid type", input, issues);
+        }
+      };
+    }
+
+    // src/schemas/unknown/unknown.ts
+    function unknown() {
+      var pipe = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      return {
+        /**
+         * The schema type.
+         */
+        type: "unknown",
+        /**
+         * Whether it's async.
+         */
+        async: false,
+        /**
+         * Parses unknown input based on its schema.
+         *
+         * @param input The input to be parsed.
+         * @param info The parse info.
+         *
+         * @returns The parsed output.
+         */
+        _parse: function _parse(input, info) {
+          return executePipe(input, pipe, info, "unknown");
+        }
+      };
+    }
+
+    // src/methods/omit/omit.ts
+    function omit(schema, keys, arg3, arg4, arg5) {
+      var _getRestAndDefaultArg13 = getRestAndDefaultArgs(arg3, arg4, arg5),
+        _getRestAndDefaultArg14 = _slicedToArray(_getRestAndDefaultArg13, 3),
+        rest = _getRestAndDefaultArg14[0],
+        error = _getRestAndDefaultArg14[1],
+        pipe = _getRestAndDefaultArg14[2];
+      return object(Object.entries(schema.entries).reduce(function (entries, _ref24) {
+        var _ref25 = _slicedToArray(_ref24, 2),
+          key = _ref25[0],
+          schema2 = _ref25[1];
+        return keys.includes(key) ? entries : _objectSpread2(_objectSpread2({}, entries), {}, _defineProperty({}, key, schema2));
+      }, {}), rest, error, pipe);
+    }
+
+    // src/methods/parse/parse.ts
+    function parse(schema, input, info) {
+      var result = schema._parse(input, info);
+      if (result.issues) {
+        throw new ValiError(result.issues);
+      }
+      return result.output;
+    }
+
+    // src/methods/safeParse/safeParse.ts
+    function safeParse(schema, input, info) {
+      var result = schema._parse(input, info);
+      return result.issues ? {
+        success: false,
+        error: new ValiError(result.issues),
+        issues: result.issues
+      } : {
+        success: true,
+        data: result.output,
+        output: result.output
+      };
+    }
+
+    // src/validations/custom/custom.ts
+    function custom(requirement, error) {
+      return function (input) {
+        return !requirement(input) ? getPipeIssues("custom", error || "Invalid input", input) : getOutput(input);
+      };
+    }
+
+    // src/validations/notValue/notValue.ts
+    function notValue(requirement, error) {
+      return function (input) {
+        return input === requirement ? getPipeIssues("not_value", error || "Invalid value", input) : getOutput(input);
+      };
+    }
+
+    // src/validations/regex/regex.ts
+    function regex(requirement, error) {
+      return function (input) {
+        return !requirement.test(input) ? getPipeIssues("regex", error || "Invalid regex", input) : getOutput(input);
+      };
+    }
+
+    const ZHTML5Fonts = union([
+        literal("gothic"),
+        literal("mincho"),
+        literal("defont"),
+    ]);
+
+    const ZFormattedComment = object({
+        id: optional(number(), 0),
+        vpos: optional(number(), 0),
+        content: optional(string(), ""),
+        date: optional(number(), 0),
+        date_usec: optional(number(), 0),
+        owner: optional(_boolean(), false),
+        premium: optional(_boolean(), false),
+        mail: optional(array(string()), []),
+        user_id: optional(number(), 0),
+        layer: optional(number(), -1),
+        is_my_post: optional(_boolean(), false),
+    });
+    omit(ZFormattedComment, [
+        "layer",
+        "user_id",
+        "is_my_post",
+    ]);
+
+    const ZApiChat = object({
+        thread: optional(string(), ""),
+        no: optional(number(), 0),
+        vpos: number(),
+        date: optional(number(), 0),
+        date_usec: optional(number(), 0),
+        nicoru: optional(number(), 0),
+        premium: optional(number(), 0),
+        anonymity: optional(number(), 0),
+        user_id: optional(string(), ""),
+        mail: optional(string(), ""),
+        content: string(),
+        deleted: optional(number(), 0),
+    });
+    const ZRawApiResponse = union([
+        object({ chat: ZApiChat }),
+        record(string([notValue("chat")]), unknown()),
+    ]);
+    object({
+        content: string(),
+    });
+    object({
+        resultcode: number(),
+        thread: string(),
+        server_time: number(),
+        ticket: string(),
+        revision: number(),
+    });
+    object({
+        thread: string(),
+        count: number(),
+    });
+    object({
+        thread: string(),
+        num_res: number(),
+    });
+
+    const ZOwnerComment = object({
+        time: string(),
+        command: string(),
+        comment: string(),
+    });
+
+    const ZV1Comment = object({
+        id: string(),
+        no: number(),
+        vposMs: number(),
+        body: string(),
+        commands: array(string()),
+        userId: string(),
+        isPremium: _boolean(),
+        score: number(),
+        postedAt: string(),
+        nicoruCount: number(),
+        nicoruId: nullable(string()),
+        source: string(),
+        isMyPost: _boolean(),
+    });
+    const ZV1Thread = object({
+        id: unknown(),
+        fork: string(),
+        commentCount: optional(number(), 0),
+        comments: array(ZV1Comment),
+    });
+
+    const ZCommentFont = union([
+        literal("defont"),
+        literal("mincho"),
+        literal("gothic"),
+        literal("gulim"),
+        literal("simsun"),
+    ]);
+    const ZCommentFlashFont = union([
+        literal("defont"),
+        literal("gulim"),
+        literal("simsun"),
+    ]);
+    const ZCommentContentItemSpacer = object({
+        type: literal("spacer"),
+        char: string(),
+        charWidth: number(),
+        isButton: optional(_boolean()),
+        font: optional(ZCommentFlashFont),
+        count: number(),
+    });
+    const ZCommentContentItemText = object({
+        type: literal("text"),
+        content: string(),
+        slicedContent: array(string()),
+        isButton: optional(_boolean()),
+        font: optional(ZCommentFlashFont),
+        width: optional(array(number())),
+    });
+    const ZCommentContentItem = union([
+        ZCommentContentItemSpacer,
+        ZCommentContentItemText,
+    ]);
+    const ZCommentMeasuredContentItemText = intersect([
+        ZCommentContentItem,
+        object({
+            width: array(number()),
+        }),
+    ]);
+    const ZCommentMeasuredContentItem = union([
+        ZCommentMeasuredContentItemText,
+        ZCommentContentItemSpacer,
+    ]);
+    const ZCommentSize = union([
+        literal("big"),
+        literal("medium"),
+        literal("small"),
+    ]);
+    const ZCommentLoc = union([
+        literal("ue"),
+        literal("naka"),
+        literal("shita"),
+    ]);
+    const ZMeasureInput = object({
+        font: ZCommentFont,
+        content: array(ZCommentContentItem),
+        lineHeight: number(),
+        charSize: number(),
+        lineCount: number(),
+    });
+
     const colors = {
         white: "#FFFFFF",
         red: "#FF0000",
@@ -245,81 +1688,6 @@
     const isNumber = (i) => typeof i === "number";
     const isObject = (i) => typeof i === "object";
     const typeGuard = {
-        formatted: {
-            comment: (i) => objectVerify(i, [
-                "id",
-                "vpos",
-                "content",
-                "date",
-                "date_usec",
-                "owner",
-                "premium",
-                "mail",
-                "user_id",
-                "layer",
-                "is_my_post",
-            ]),
-            comments: (i) => {
-                if (typeof i !== "object")
-                    return false;
-                for (const item of i) {
-                    if (!typeGuard.formatted.comment(item))
-                        return false;
-                }
-                return true;
-            },
-            legacyComment: (i) => objectVerify(i, [
-                "id",
-                "vpos",
-                "content",
-                "date",
-                "owner",
-                "premium",
-                "mail",
-            ]),
-            legacyComments: (i) => {
-                if (typeof i !== "object")
-                    return false;
-                for (const item of i) {
-                    if (!typeGuard.formatted.legacyComment(item))
-                        return false;
-                }
-                return true;
-            },
-        },
-        legacy: {
-            rawApiResponses: (i) => {
-                if (typeof i !== "object")
-                    return false;
-                for (const itemWrapper of i) {
-                    for (const key of Object.keys(itemWrapper)) {
-                        const item = itemWrapper[key];
-                        if (!item)
-                            continue;
-                        if (!(typeGuard.legacy.apiChat(item) ||
-                            typeGuard.legacy.apiGlobalNumRes(item) ||
-                            typeGuard.legacy.apiLeaf(item) ||
-                            typeGuard.legacy.apiPing(item) ||
-                            typeGuard.legacy.apiThread(item))) {
-                            return false;
-                        }
-                    }
-                }
-                return true;
-            },
-            apiChat: (i) => typeof i === "object" &&
-                objectVerify(i, ["content", "date", "no", "thread", "vpos"]),
-            apiGlobalNumRes: (i) => objectVerify(i, ["num_res", "thread"]),
-            apiLeaf: (i) => objectVerify(i, ["count", "thread"]),
-            apiPing: (i) => objectVerify(i, ["content"]),
-            apiThread: (i) => objectVerify(i, [
-                "resultcode",
-                "revision",
-                "server_time",
-                "thread",
-                "ticket",
-            ]),
-        },
         xmlDocument: (i) => {
             if (!i.documentElement ||
                 i.documentElement.nodeName !== "packet")
@@ -335,91 +1703,45 @@
             return true;
         },
         legacyOwner: {
-            comments: (i) => {
-                if (typeof i !== "string")
-                    return false;
-                const lists = i.split("\n");
-                for (const list of lists) {
-                    if (list.split(":").length < 3) {
-                        return false;
+            comments: (i) => is(string([
+                custom((i) => {
+                    const lists = i.split(/\r\n|\r|\n/);
+                    for (const list of lists) {
+                        if (list.split(":").length < 3) {
+                            return false;
+                        }
                     }
-                }
-                return true;
-            },
-        },
-        owner: {
-            comment: (i) => objectVerify(i, ["time", "command", "comment"]),
-            comments: (i) => {
-                if (typeof i !== "object")
-                    return false;
-                for (const item of i) {
-                    if (!typeGuard.owner.comment(item))
-                        return false;
-                }
-                return true;
-            },
-        },
-        v1: {
-            comment: (i) => objectVerify(i, [
-                "id",
-                "no",
-                "vposMs",
-                "body",
-                "commands",
-                "userId",
-                "isPremium",
-                "score",
-                "postedAt",
-                "nicoruCount",
-                "nicoruId",
-                "source",
-                "isMyPost",
-            ]),
-            thread: (i) => {
-                if (!objectVerify(i, ["id", "fork", "commentCount", "comments"]))
-                    return false;
-                for (const value of i.comments) {
-                    if (!typeGuard.v1.comment(value))
-                        return false;
-                }
-                return true;
-            },
-            threads: (i) => {
-                if (typeof i !== "object")
-                    return false;
-                for (const item of i) {
-                    if (!typeGuard.v1.thread(item))
-                        return false;
-                }
-                return true;
-            },
+                    return true;
+                }),
+            ]), i),
         },
         nicoScript: {
             range: {
-                target: (i) => typeof i === "string" &&
-                    !!RegExp(/^(?:\u6295?\u30b3\u30e1|\u5168)$/).exec(i),
+                target: (i) => is(string([regex(/^(?:\u6295?\u30b3\u30e1|\u5168)$/)]), i),
             },
             replace: {
-                range: (i) => typeof i === "string" && !!RegExp(/^[\u5358\u5168]$/).exec(i),
-                target: (i) => typeof i === "string" &&
-                    !!RegExp(/^(?:\u30b3\u30e1|\u6295\u30b3\u30e1|\u5168|\u542b\u3080|\u542b\u307e\u306a\u3044)$/).exec(i),
-                condition: (i) => typeof i === "string" &&
-                    !!RegExp(/^(?:\u90e8\u5206\u4e00\u81f4|\u5b8c\u5168\u4e00\u81f4)$/).exec(i),
+                range: (i) => is(string([regex(/^[\u5358\u5168]$/)]), i),
+                target: (i) => is(string([
+                    regex(/^(?:\u30b3\u30e1|\u6295\u30b3\u30e1|\u5168|\u542b\u3080|\u542b\u307e\u306a\u3044)$/),
+                ]), i),
+                condition: (i) => is(string([
+                    regex(/^(?:\u90e8\u5206\u4e00\u81f4|\u5b8c\u5168\u4e00\u81f4)$/),
+                ]), i),
             },
         },
         comment: {
-            font: (i) => typeof i === "string" && !!RegExp(/^(?:gothic|mincho|defont)$/).exec(i),
-            loc: (i) => typeof i === "string" && !!RegExp(/^(?:ue|naka|shita)$/).exec(i),
-            size: (i) => typeof i === "string" && !!RegExp(/^(?:big|medium|small)$/).exec(i),
             command: {
-                key: (i) => typeof i === "string" &&
-                    !!RegExp(/^(?:full|ender|_live|invisible)$/).exec(i),
+                key: (i) => is(union([
+                    literal("full"),
+                    literal("ender"),
+                    literal("_live"),
+                    literal("invisible"),
+                ]), i),
             },
-            color: (i) => typeof i === "string" && Object.keys(colors).includes(i),
-            colorCode: (i) => typeof i === "string" &&
-                !!RegExp(/^#(?:[0-9a-z]{3}|[0-9a-z]{6})$/).exec(i),
-            colorCodeAllowAlpha: (i) => typeof i === "string" &&
-                !!RegExp(/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/).exec(i),
+            color: (i) => is(string([custom((i) => Object.keys(colors).includes(i))]), i),
+            colorCodeAllowAlpha: (i) => is(string([
+                regex(/^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/),
+            ]), i),
         },
         config: {
             initOptions: (item) => {
@@ -452,25 +1774,17 @@
             },
         },
         internal: {
-            CommentMeasuredContentItem: (i) => objectVerify(i, ["content", "slicedContent", "width"]),
-            CommentMeasuredContentItemArray: (i) => Array.isArray(i) &&
-                i.every(typeGuard.internal.CommentMeasuredContentItem),
+            CommentMeasuredContentItemArray: (i) => is(array(ZCommentMeasuredContentItem), i),
             MultiConfigItem: (i) => typeof i === "object" && objectVerify(i, ["html5", "flash"]),
-            HTML5Fonts: (i) => i === "defont" || i === "mincho" || i === "gothic",
-            MeasureInput: (i) => objectVerify(i, [
-                "font",
-                "content",
-                "lineHeight",
-                "charSize",
-                "lineCount",
-            ]),
+            HTML5Fonts: (i) => is(ZHTML5Fonts, i),
+            MeasureInput: (i) => is(ZMeasureInput, i),
         },
     };
     const objectVerify = (item, keys) => {
         if (typeof item !== "object" || !item)
             return false;
         for (const key of keys) {
-            if (!Object.prototype.hasOwnProperty.call(item, key))
+            if (!Object.hasOwn(item, key))
                 return false;
         }
         return true;
@@ -576,12 +1890,12 @@
     };
     const parseBrackets = (input) => {
         const content = input.split(""), result = [];
-        let quote = "", last_i = "", string = "";
+        let quote = "", lastChar = "", string = "";
         for (const i of content) {
             if (RegExp(/^["'\u300c]$/).exec(i) && quote === "") {
                 quote = i;
             }
-            else if (RegExp(/^["']$/).exec(i) && quote === i && last_i !== "\\") {
+            else if (RegExp(/^["']$/).exec(i) && quote === i && lastChar !== "\\") {
                 result.push(string.replaceAll("\\n", "\n"));
                 quote = "";
                 string = "";
@@ -600,7 +1914,7 @@
             else {
                 string += i;
             }
-            last_i = i;
+            lastChar = i;
         }
         result.push(string);
         return result;
@@ -798,11 +2112,11 @@
             result.fillColor ??= fillColor;
             return;
         }
-        if (typeGuard.comment.loc(command)) {
+        if (is(ZCommentLoc, command)) {
             result.loc ??= command;
             return;
         }
-        if (result.size === undefined && typeGuard.comment.size(command)) {
+        if (result.size === undefined && is(ZCommentSize, command)) {
             result.size = command;
             result.fontSize = getConfig(config.fontSize, isFlash)[command].default;
             return;
@@ -816,7 +2130,7 @@
             result.color ??= colorCode[0].toUpperCase();
             return;
         }
-        if (typeGuard.comment.font(command)) {
+        if (is(ZCommentFont, command)) {
             result.font ??= command;
             return;
         }
@@ -876,10 +2190,10 @@
         }
         for (let j = 0; j < comment.long; j++) {
             const vpos = comment.vpos + j;
-            ArrayPush(timeline, vpos, comment);
+            arrayPush(timeline, vpos, comment);
             if (j > comment.long - 20)
                 continue;
-            ArrayPush(collision, vpos, comment);
+            arrayPush(collision, vpos, comment);
         }
         comment.posY = posY;
     };
@@ -890,26 +2204,25 @@
                 return (comment.height - config.canvasHeight) / -2;
             }
             let posY = 0;
-            let isChanged = true, count = 0;
-            while (isChanged && count < 10) {
+            let isChanged = true;
+            while (isChanged) {
                 isChanged = false;
-                count++;
                 for (let j = beforeVpos, n = comment.long + 125; j < n; j++) {
                     const vpos = comment.vpos + j;
-                    const left_pos = getPosX(comment.comment, vpos);
+                    const leftPos = getPosX(comment.comment, vpos);
                     let isBreak = false;
-                    if (left_pos + comment.width >= config.collisionRange.right &&
-                        left_pos <= config.collisionRange.right) {
+                    if (leftPos + comment.width >= config.collisionRange.right &&
+                        leftPos <= config.collisionRange.right) {
                         const result = getPosY(posY, comment, collision.right[vpos]);
                         posY = result.currentPos;
-                        isChanged = result.isChanged;
+                        isChanged ||= result.isChanged;
                         isBreak = result.isBreak;
                     }
-                    if (left_pos + comment.width >= config.collisionRange.left &&
-                        left_pos <= config.collisionRange.left) {
+                    if (leftPos + comment.width >= config.collisionRange.left &&
+                        leftPos <= config.collisionRange.left) {
                         const result = getPosY(posY, comment, collision.left[vpos]);
                         posY = result.currentPos;
-                        isChanged = result.isChanged;
+                        isChanged ||= result.isChanged;
                         isBreak = result.isBreak;
                     }
                     if (isBreak)
@@ -920,21 +2233,23 @@
         })();
         for (let j = beforeVpos, n = comment.long + 125; j < n; j++) {
             const vpos = comment.vpos + j;
-            const left_pos = getPosX(comment.comment, vpos);
-            ArrayPush(timeline, vpos, comment);
-            if (left_pos + comment.width >= config.collisionRange.right &&
-                left_pos <= config.collisionRange.right) {
-                ArrayPush(collision.right, vpos, comment);
+            const leftPos = getPosX(comment.comment, vpos);
+            arrayPush(timeline, vpos, comment);
+            if (leftPos + comment.width + config.collisionPadding >=
+                config.collisionRange.right &&
+                leftPos <= config.collisionRange.right) {
+                arrayPush(collision.right, vpos, comment);
             }
-            if (left_pos + comment.width >= config.collisionRange.left &&
-                left_pos <= config.collisionRange.left) {
-                ArrayPush(collision.left, vpos, comment);
+            if (leftPos + comment.width + config.collisionPadding >=
+                config.collisionRange.left &&
+                leftPos <= config.collisionRange.left) {
+                arrayPush(collision.left, vpos, comment);
             }
         }
         comment.posY = posY;
     };
-    const getPosY = (currentPos, targetComment, collision) => {
-        let isChanged = false, isBreak = false;
+    const getPosY = (currentPos, targetComment, collision, isChanged = false) => {
+        let isBreak = false;
         if (!collision)
             return { currentPos, isChanged, isBreak };
         for (const collisionItem of collision) {
@@ -961,6 +2276,7 @@
                     isBreak = true;
                     break;
                 }
+                return getPosY(currentPos, targetComment, collision, true);
             }
         }
         return { currentPos, isChanged, isBreak };
@@ -984,12 +2300,12 @@
         switch (font) {
             case "gulim":
             case "simsun":
-                return config.font[font].replace("[size]", `${size}`);
+                return config.fonts.flash[font].replace("[size]", `${size}`);
             case "gothic":
             case "mincho":
-                return `${config.fonts[font].weight} ${size}px ${config.fonts[font].font}`;
+                return `${config.fonts.html5[font].weight} ${size}px ${config.fonts.html5[font].font}`;
             default:
-                return `${config.fonts.defont.weight} ${size}px ${config.fonts.defont.font}`;
+                return `${config.fonts.html5.defont.weight} ${size}px ${config.fonts.html5.defont.font}`;
         }
     };
 
@@ -1026,7 +2342,7 @@
         const index = {};
         return comments.filter((comment) => {
             const key = `${comment.content}@@${[...comment.mail]
-            .sort()
+            .sort((a, b) => a.localeCompare(b))
             .filter((e) => !RegExp(/@[\d.]+|184|device:.+|patissier|ca/).exec(e))
             .join("")}`, lastComment = index[key];
             if (lastComment === undefined) {
@@ -1151,10 +2467,18 @@
         for (const line of lines) {
             const lineContent = parseLine(line);
             const firstContent = lineContent[0];
-            if (firstContent?.font) {
+            const defaultFont = firstContent?.font;
+            if (defaultFont) {
                 results.push(...lineContent.map((val) => {
-                    if (!val.font) {
-                        val.font = firstContent.font;
+                    val.font ??= defaultFont;
+                    if (val.type === "spacer") {
+                        const spacer = config.compatSpacer.flash[val.char];
+                        if (!spacer)
+                            return val;
+                        const width = spacer[val.font];
+                        if (!width)
+                            return val;
+                        val.charWidth = width;
                     }
                     return val;
                 }));
@@ -1170,24 +2494,51 @@
         const lineContent = [];
         for (const part of parts) {
             if (part.match(/[ -~｡-ﾟ]+/g) !== null) {
-                lineContent.push({ content: part, slicedContent: part.split("\n") });
+                addPartToResult(lineContent, part, "defont");
                 continue;
             }
             parseFullWidthPart(part, lineContent);
         }
         return lineContent;
     };
+    const addPartToResult = (lineContent, part, font) => {
+        if (part === "")
+            return;
+        for (const key of Object.keys(config.compatSpacer.flash)) {
+            const spacerWidth = config.compatSpacer.flash[key]?.[font ?? "defont"];
+            if (!spacerWidth)
+                continue;
+            const compatIndex = part.indexOf(key);
+            if (compatIndex >= 0) {
+                addPartToResult(lineContent, part.slice(0, compatIndex), font);
+                let i = compatIndex;
+                for (; i < part.length && part[i] === key; i++) {
+                }
+                lineContent.push({
+                    type: "spacer",
+                    char: key,
+                    charWidth: spacerWidth,
+                    font,
+                    count: i - compatIndex,
+                });
+                addPartToResult(lineContent, part.slice(i), font);
+                return;
+            }
+        }
+        lineContent.push({
+            type: "text",
+            content: part,
+            slicedContent: part.split("\n"),
+            font,
+        });
+    };
     const parseFullWidthPart = (part, lineContent) => {
         const index = getFlashFontIndex(part);
         if (index.length === 0) {
-            lineContent.push({ content: part, slicedContent: part.split("\n") });
+            addPartToResult(lineContent, part);
         }
         else if (index.length === 1 && index[0]) {
-            lineContent.push({
-                content: part,
-                slicedContent: part.split("\n"),
-                font: getFlashFontName(index[0].font),
-            });
+            addPartToResult(lineContent, part, getFlashFontName(index[0].font));
         }
         else {
             parseMultiFontFullWidthPart(part, index, lineContent);
@@ -1195,59 +2546,36 @@
     };
     const parseMultiFontFullWidthPart = (part, index, lineContent) => {
         index.sort(nativeSort((val) => val.index));
-        if (config.FlashMode === "xp") {
+        if (config.flashMode === "xp") {
             let offset = 0;
             for (let i = 1, n = index.length; i < n; i++) {
                 const currentVal = index[i], lastVal = index[i - 1];
                 if (currentVal === undefined || lastVal === undefined)
                     continue;
                 const content = part.slice(offset, currentVal.index);
-                lineContent.push({
-                    content: content,
-                    slicedContent: content.split("\n"),
-                    font: getFlashFontName(lastVal.font),
-                });
+                addPartToResult(lineContent, content, getFlashFontName(lastVal.font));
                 offset = currentVal.index;
             }
             const val = index[index.length - 1];
             if (val) {
                 const content = part.slice(offset);
-                lineContent.push({
-                    content: content,
-                    slicedContent: content.split("\n"),
-                    font: getFlashFontName(val.font),
-                });
+                addPartToResult(lineContent, content, getFlashFontName(val.font));
             }
             return;
         }
         const firstVal = index[0], secondVal = index[1];
         if (!firstVal || !secondVal) {
-            lineContent.push({
-                content: part,
-                slicedContent: part.split("\n"),
-            });
+            addPartToResult(lineContent, part);
             return;
         }
         if (firstVal.font !== "gothic") {
-            lineContent.push({
-                content: part,
-                slicedContent: part.split("\n"),
-                font: getFlashFontName(firstVal.font),
-            });
+            addPartToResult(lineContent, part, getFlashFontName(firstVal.font));
             return;
         }
         const firstContent = part.slice(0, secondVal.index);
         const secondContent = part.slice(secondVal.index);
-        lineContent.push({
-            content: firstContent,
-            slicedContent: firstContent.split("\n"),
-            font: getFlashFontName(firstVal.font),
-        });
-        lineContent.push({
-            content: secondContent,
-            slicedContent: secondContent.split("\n"),
-            font: getFlashFontName(secondVal.font),
-        });
+        addPartToResult(lineContent, firstContent, getFlashFontName(firstVal.font));
+        addPartToResult(lineContent, secondContent, getFlashFontName(secondVal.font));
     };
     const getButtonParts = (comment) => {
         let leftParts = undefined;
@@ -1256,12 +2584,16 @@
         const lineOffset = comment.lineOffset;
         const lineHeight = comment.fontSize * comment.lineHeight;
         const offsetKey = comment.resizedY ? "resized" : "default";
-        const offsetY = config.commentYPaddingTop[offsetKey] +
+        const offsetY = config.flashCommentYPaddingTop[offsetKey] +
             comment.fontSize *
                 comment.lineHeight *
-                config.commentYOffset[comment.size][offsetKey];
+                config.flashCommentYOffset[comment.size][offsetKey];
         let leftOffset = 0, lineCount = 0, isLastButton = false;
         for (const item of comment.content) {
+            if (item.type === "spacer") {
+                leftOffset += item.count * comment.fontSize * item.charWidth;
+                continue;
+            }
             const lines = item.slicedContent;
             for (let j = 0, n = lines.length; j < n; j++) {
                 const line = lines[j];
@@ -1360,39 +2692,75 @@
     TypeGuardError.prototype.name = "TypeGuardError";
 
     const getLineHeight = (fontSize, isFlash, resized = false) => {
-        const lineCounts = getConfig(config.lineCounts, isFlash), CommentStageSize = getConfig(config.CommentStageSize, isFlash), lineHeight = CommentStageSize.height / lineCounts.doubleResized[fontSize], defaultLineCount = lineCounts.default[fontSize];
+        const lineCounts = getConfig(config.html5LineCounts, isFlash), commentStageSize = getConfig(config.commentStageSize, isFlash), lineHeight = commentStageSize.height / lineCounts.doubleResized[fontSize], defaultLineCount = lineCounts.default[fontSize];
         if (resized) {
             const resizedLineCount = lineCounts.resized[fontSize];
-            return ((CommentStageSize.height -
+            return ((commentStageSize.height -
                 lineHeight * (defaultLineCount / resizedLineCount)) /
                 (resizedLineCount - 1));
         }
-        return (CommentStageSize.height - lineHeight) / (defaultLineCount - 1);
+        return (commentStageSize.height - lineHeight) / (defaultLineCount - 1);
     };
     const getCharSize = (fontSize, isFlash) => {
-        const lineCounts = getConfig(config.lineCounts, isFlash), CommentStageSize = getConfig(config.CommentStageSize, isFlash);
-        return CommentStageSize.height / lineCounts.doubleResized[fontSize];
+        const lineCounts = getConfig(config.html5LineCounts, isFlash), commentStageSize = getConfig(config.commentStageSize, isFlash);
+        return commentStageSize.height / lineCounts.doubleResized[fontSize];
     };
-    const measure = (comment, context) => {
-        const width = measureWidth(comment, context);
+    const measure = (comment, renderer) => {
+        const width = measureWidth(comment, renderer);
         return {
             ...width,
             height: comment.lineHeight * (comment.lineCount - 1) + comment.charSize,
         };
     };
-    const measureWidth = (comment, context) => {
+    const addHTML5PartToResult = (lineContent, part, font) => {
+        if (part === "")
+            return;
+        font ??= "defont";
+        for (const key of Object.keys(config.compatSpacer.html5)) {
+            const spacerWidth = config.compatSpacer.html5[key]?.[font];
+            if (!spacerWidth)
+                continue;
+            const compatIndex = part.indexOf(key);
+            if (compatIndex >= 0) {
+                addHTML5PartToResult(lineContent, part.slice(0, compatIndex), font);
+                let i = compatIndex;
+                for (; i < part.length && part[i] === key; i++) {
+                }
+                lineContent.push({
+                    type: "spacer",
+                    char: key,
+                    charWidth: spacerWidth,
+                    count: i - compatIndex,
+                });
+                addHTML5PartToResult(lineContent, part.slice(i), font);
+                return;
+            }
+        }
+        lineContent.push({
+            type: "text",
+            content: part,
+            slicedContent: part.split("\n"),
+        });
+    };
+    const measureWidth = (comment, renderer) => {
         const { fontSize, scale } = getFontSizeAndScale(comment.charSize), lineWidth = [], itemWidth = [];
-        context.font = parseFont(comment.font, fontSize);
+        renderer.setFont(parseFont(comment.font, fontSize));
         let currentWidth = 0;
         for (const item of comment.content) {
+            if (item.type === "spacer") {
+                currentWidth += item.count * fontSize * item.charWidth;
+                itemWidth.push([item.count * fontSize * item.charWidth]);
+                lineWidth.push(Math.ceil(currentWidth * scale));
+                continue;
+            }
             const lines = item.content.split("\n");
-            context.font = parseFont(item.font ?? comment.font, fontSize);
+            renderer.setFont(parseFont(item.font ?? comment.font, fontSize));
             const width = [];
             for (let j = 0, n = lines.length; j < n; j++) {
                 const line = lines[j];
                 if (line === undefined)
                     throw new TypeGuardError();
-                const measure = context.measureText(line);
+                const measure = renderer.measureText(line);
                 currentWidth += measure.width;
                 width.push(measure.width);
                 if (j < lines.length - 1) {
@@ -1411,12 +2779,12 @@
     };
     const getFontSizeAndScale = (charSize) => {
         charSize *= 0.8;
-        if (charSize < config.minFontSize) {
+        if (charSize < config.html5MinFontSize) {
             if (charSize >= 1)
                 charSize = Math.floor(charSize);
             return {
-                scale: charSize / config.minFontSize,
-                fontSize: config.minFontSize,
+                scale: charSize / config.html5MinFontSize,
+                fontSize: config.html5MinFontSize,
             };
         }
         return {
@@ -1425,10 +2793,11 @@
         };
     };
 
-    var index$1 = /*#__PURE__*/Object.freeze({
+    var index$2 = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        ArrayEqual: ArrayEqual,
-        ArrayPush: ArrayPush,
+        addHTML5PartToResult: addHTML5PartToResult,
+        arrayEqual: arrayEqual,
+        arrayPush: arrayPush,
         buildAtButtonComment: buildAtButtonComment,
         changeCALayer: changeCALayer,
         getButtonParts: getButtonParts,
@@ -1457,21 +2826,8 @@
         processMovableComment: processMovableComment
     });
 
-    const generateCanvas = () => {
-        return document.createElement("canvas");
-    };
-    const getContext = (canvas) => {
-        const context = canvas.getContext("2d");
-        if (!context)
-            throw new CanvasRenderingContext2DError();
-        return context;
-    };
-    const drawImage = (targetContext, sourceImage, x, y) => {
-        targetContext.drawImage(sourceImage, x, y);
-    };
-
     class BaseComment {
-        context;
+        renderer;
         cacheKey;
         comment;
         pos;
@@ -1479,16 +2835,13 @@
         pluginName = "BaseComment";
         image;
         buttonImage;
-        constructor(comment, context) {
-            this.context = context;
+        constructor(comment, renderer) {
+            this.renderer = renderer;
             this.posY = 0;
             this.pos = { x: 0, y: 0 };
             comment.content = comment.content.replace(/\t/g, "\u2003\u2003");
             this.comment = this.convertComment(comment);
-            this.cacheKey =
-                JSON.stringify(this.comment.content) +
-                    `@@${this.pluginName}@@` +
-                    [...this.comment.mail].sort().join(",");
+            this.cacheKey = this.getCacheKey();
         }
         get invisible() {
             return this.comment.invisible;
@@ -1569,48 +2922,44 @@
                 this.image = this.getTextImage();
             }
             if (this.image) {
-                this.context.save();
+                this.renderer.save();
                 if (this.comment._live) {
-                    this.context.globalAlpha = config.contextFillLiveOpacity;
+                    this.renderer.setGlobalAlpha(config.contextFillLiveOpacity);
                 }
                 else {
-                    this.context.globalAlpha = 1;
+                    this.renderer.setGlobalAlpha(1);
                 }
                 if (this.comment.button && !this.comment.button.hidden) {
                     const button = this.getButtonImage(posX, posY, cursor);
-                    button && drawImage(this.context, button, posX, posY);
+                    button && this.renderer.drawImage(button, posX, posY);
                 }
-                drawImage(this.context, this.image, posX, posY);
-                this.context.restore();
+                this.renderer.drawImage(this.image, posX, posY);
+                this.renderer.restore();
             }
         }
         _drawRectColor(posX, posY) {
             if (this.comment.wakuColor) {
-                this.context.save();
-                this.context.strokeStyle = this.comment.wakuColor;
-                this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
-                this.context.restore();
+                this.renderer.save();
+                this.renderer.setStrokeStyle(this.comment.wakuColor);
+                this.renderer.strokeRect(posX, posY, this.comment.width, this.comment.height);
+                this.renderer.restore();
             }
         }
         _drawBackgroundColor(posX, posY) {
             if (this.comment.fillColor) {
-                this.context.save();
-                this.context.fillStyle = this.comment.fillColor;
-                this.context.fillRect(posX, posY, this.comment.width, this.comment.height);
-                this.context.restore();
+                this.renderer.save();
+                this.renderer.setFillStyle(this.comment.fillColor);
+                this.renderer.fillRect(posX, posY, this.comment.width, this.comment.height);
+                this.renderer.restore();
             }
         }
         _drawDebugInfo(posX, posY) {
             if (isDebug) {
-                this.context.save();
-                const font = this.context.font;
-                const fillStyle = this.context.fillStyle;
-                this.context.font = parseFont("defont", 30);
-                this.context.fillStyle = "#ff00ff";
-                this.context.fillText(this.comment.mail.join(","), posX, posY + 30);
-                this.context.font = font;
-                this.context.fillStyle = fillStyle;
-                this.context.restore();
+                this.renderer.save();
+                this.renderer.setFont(parseFont("defont", 30));
+                this.renderer.setFillStyle("#ff00ff");
+                this.renderer.fillText(this.comment.mail.join(","), posX, posY + 30);
+                this.renderer.restore();
             }
         }
         _drawCollision(posX, posY, showCollision) {
@@ -1657,14 +3006,6 @@
                 image,
             };
         }
-        createCanvas() {
-            const image = generateCanvas();
-            const context = getContext(image);
-            return {
-                image,
-                context,
-            };
-        }
         getButtonImage(posX, posY, cursor) {
             console.error("getButtonImage method is not implemented", posX, posY, cursor);
             throw new NotImplementedError(this.pluginName, "getButtonImage");
@@ -1673,6 +3014,11 @@
             console.error("isHovered method is not implemented", posX, posY, cursor);
             throw new NotImplementedError(this.pluginName, "getButtonImage");
         }
+        getCacheKey() {
+            return (JSON.stringify(this.comment.content) +
+                `@@${this.pluginName}@@` +
+                [...this.comment.mail].sort((a, b) => a.localeCompare(b)).join(","));
+        }
     }
 
     const drawLeftBorder = (context, left, top, width, height, radius) => {
@@ -1712,13 +3058,10 @@
         _globalScale;
         pluginName = "FlashComment";
         buttonImage;
-        buttonContext;
-        constructor(comment, context) {
-            super(comment, context);
+        constructor(comment, renderer) {
+            super(comment, renderer);
             this._globalScale ??= getConfig(config.commentScale, true);
-            const button = this.createCanvas();
-            this.buttonImage = button.image;
-            this.buttonContext = button.context;
+            this.buttonImage = renderer.getCanvas();
         }
         get content() {
             return this.comment.rawContent;
@@ -1737,10 +3080,7 @@
                 comment.font = val.font;
             }
             this.comment = this.getCommentSize(comment);
-            this.cacheKey =
-                JSON.stringify(this.comment.content) +
-                    `@@${this.pluginName}@@` +
-                    [...this.comment.mail].sort((a, b) => a.localeCompare(b)).join(",");
+            this.cacheKey = this.getCacheKey();
             delete this.image;
         }
         convertComment(comment) {
@@ -1764,14 +3104,14 @@
                     content: [],
                 };
             }
-            this.context.save();
-            this.context.font = parseFont(parsedData.font, parsedData.fontSize);
+            this.renderer.save();
+            this.renderer.setFont(parseFont(parsedData.font, parsedData.fontSize));
             const measure = this.measureText({ ...parsedData, scale: 1 });
             if (options.scale !== 1 && parsedData.layer === -1) {
                 measure.height *= options.scale;
                 measure.width *= options.scale;
             }
-            this.context.restore();
+            this.renderer.restore();
             if (parsedData.button && !parsedData.button.hidden) {
                 measure.width += getConfig(config.atButtonPadding, true) * 4;
             }
@@ -1818,12 +3158,12 @@
                 ]
                 : parseContent(input);
             const lineCount = (input.match(/\n/g)?.length ?? 0) + 1;
-            const lineOffset = (input.match(new RegExp(config.FlashScriptChar.super, "g"))?.length ??
+            const lineOffset = (input.match(new RegExp(config.flashScriptChar.super, "g"))?.length ??
                 0) *
                 -1 *
-                config.scriptCharOffset +
-                (input.match(new RegExp(config.FlashScriptChar.sub, "g"))?.length ?? 0) *
-                    config.scriptCharOffset;
+                config.flashScriptCharOffset +
+                (input.match(new RegExp(config.flashScriptChar.sub, "g"))?.length ?? 0) *
+                    config.flashScriptCharOffset;
             return {
                 content,
                 lineCount,
@@ -1831,51 +3171,41 @@
             };
         }
         measureText(comment) {
-            const configLineHeight = getConfig(config.lineHeight, true), configFontSize = getConfig(config.fontSize, true);
-            const lineCount = comment.lineCount;
+            const configLineHeight = getConfig(config.lineHeight, true), configFontSize = getConfig(config.fontSize, true)[comment.size], configStageSize = getConfig(config.commentStageSize, true);
+            const defaultFontSize = configFontSize.default;
             comment.lineHeight ??= configLineHeight[comment.size].default;
+            const widthLimit = configStageSize[comment.full ? "fullWidth" : "width"];
+            const { scaleX, width, height } = this._measureContent(comment);
+            let scale = 1;
             if (isLineBreakResize(comment)) {
-                comment.fontSize = configFontSize[comment.size].resized;
-                comment.lineHeight = configLineHeight[comment.size].resized;
                 comment.resized = true;
                 comment.resizedY = true;
-                this.context.font = parseFont(comment.font, comment.fontSize);
-            }
-            const { width_arr, spacedWidth_arr } = this._measureContent(comment);
-            const leadLine = (function () {
-                let max = 0, index = -1;
-                spacedWidth_arr.forEach((val, i) => {
-                    if (max < val) {
-                        max = val;
-                        index = i;
+                const lineBreakScale = config.flashLineBreakScale[comment.size];
+                const scaledWidth = width * lineBreakScale;
+                if (comment.loc !== "naka" &&
+                    this._isDoubleResize(scaledWidth, widthLimit, comment.size, comment.lineCount, comment.full)) {
+                    if (scaledWidth > widthLimit) {
+                        const resizedFontSize = Math.round((widthLimit / scaledWidth) * defaultFontSize);
+                        const resizeRate = (resizedFontSize + 1) / (defaultFontSize + 1);
+                        scale *= resizeRate;
                     }
-                });
-                return { max, index };
-            })();
-            const width = leadLine.max;
-            const scaleX = leadLine.max / (width_arr[leadLine.index] ?? 1);
-            const width_max = width * comment.scale;
-            const height = (comment.fontSize * comment.lineHeight * lineCount +
-                config.commentYPaddingTop[comment.resizedY ? "resized" : "default"]) *
-                comment.scale;
-            if (comment.loc !== "naka") {
-                const widthLimit = getConfig(config.CommentStageSize, true)[comment.full ? "fullWidth" : "width"];
-                if (width_max > widthLimit && !comment.resizedX) {
-                    comment.fontSize = configFontSize[comment.size].default;
-                    comment.lineHeight = configLineHeight[comment.size].default;
-                    comment.scale = widthLimit / width_max;
-                    comment.resizedX = true;
-                    comment.resized = true;
-                    return this.measureText(comment);
+                }
+                else {
+                    scale *= lineBreakScale;
                 }
             }
+            else if (comment.loc !== "naka" && width > widthLimit) {
+                const resizeRate = (Math.round((widthLimit / width) * defaultFontSize) + 1) /
+                    (defaultFontSize + 1);
+                scale *= resizeRate;
+            }
+            comment.scale = scale;
             if (!typeGuard.internal.CommentMeasuredContentItemArray(comment.content)) {
                 throw new TypeGuardError();
             }
             return {
-                width: width_max,
                 charSize: 0,
-                height: height,
+                height: height * scale,
                 resized: !!comment.resized,
                 fontSize: comment.fontSize,
                 lineHeight: comment.lineHeight,
@@ -1883,75 +3213,134 @@
                 resizedX: !!comment.resizedX,
                 resizedY: !!comment.resizedY,
                 scale: comment.scale,
-                scaleX,
+                scaleX: scaleX,
+                width: width * scale,
             };
         }
+        _isDoubleResize(width, widthLimit, size, lineCount, isFull) {
+            if (width < widthLimit * 0.9 || widthLimit * 1.1 < width)
+                return width > widthLimit;
+            if (size === "big") {
+                if (8 <= lineCount &&
+                    lineCount <= 14 &&
+                    !isFull &&
+                    widthLimit * 0.99 < width)
+                    return true;
+                if (width <= widthLimit)
+                    return false;
+                if (16 <= lineCount && width * 0.95 < widthLimit)
+                    return true;
+                if (isFull) {
+                    if (width * 0.95 < widthLimit)
+                        return false;
+                    return width > widthLimit;
+                }
+                return true;
+            }
+            if (width <= widthLimit)
+                return false;
+            if (((size === "medium" && 25 <= lineCount) ||
+                (size === "small" && 38 <= lineCount)) &&
+                width * 0.95 < widthLimit)
+                return false;
+            return widthLimit < width;
+        }
         _measureContent(comment) {
-            const width_arr = [], spacedWidth_arr = [];
+            const widthArr = [], spacedWidthArr = [];
             let currentWidth = 0, spacedWidth = 0;
             for (const item of comment.content) {
+                if (item.type === "spacer") {
+                    spacedWidth +=
+                        item.count * item.charWidth * comment.fontSize +
+                            Math.max(item.count - 1, 0) * config.flashLetterSpacing;
+                    currentWidth += item.count * item.charWidth * comment.fontSize;
+                    widthArr.push(currentWidth);
+                    spacedWidthArr.push(spacedWidth);
+                    continue;
+                }
                 const lines = item.content.split("\n");
                 const widths = [];
-                this.context.font = parseFont(item.font ?? comment.font, comment.fontSize);
+                this.renderer.setFont(parseFont(item.font ?? comment.font, comment.fontSize));
                 for (let i = 0, n = lines.length; i < n; i++) {
                     const value = lines[i];
                     if (value === undefined)
                         continue;
-                    const measure = this.context.measureText(value);
+                    const measure = this.renderer.measureText(value);
                     currentWidth += measure.width;
                     spacedWidth +=
-                        measure.width + Math.max(value.length - 1, 0) * config.letterSpacing;
+                        measure.width +
+                            Math.max(value.length - 1, 0) * config.flashLetterSpacing;
                     widths.push(measure.width);
                     if (i < lines.length - 1) {
-                        width_arr.push(currentWidth);
-                        spacedWidth_arr.push(spacedWidth);
+                        widthArr.push(currentWidth);
+                        spacedWidthArr.push(spacedWidth);
                         spacedWidth = 0;
                         currentWidth = 0;
                     }
                 }
-                width_arr.push(currentWidth);
-                spacedWidth_arr.push(spacedWidth);
+                widthArr.push(currentWidth);
+                spacedWidthArr.push(spacedWidth);
                 item.width = widths;
             }
-            return { width_arr, spacedWidth_arr };
+            const leadLine = (function () {
+                let max = 0, index = -1;
+                spacedWidthArr.forEach((val, i) => {
+                    if (max < val) {
+                        max = val;
+                        index = i;
+                    }
+                });
+                return { max, index };
+            })();
+            const scaleX = leadLine.max / (widthArr[leadLine.index] ?? 1);
+            const width = leadLine.max * comment.scale;
+            const height = (comment.fontSize * (comment.lineHeight ?? 0) * comment.lineCount +
+                config.flashCommentYPaddingTop[comment.resizedY ? "resized" : "default"]) *
+                comment.scale;
+            return { scaleX, width, height };
         }
         _drawCollision(posX, posY, showCollision) {
             if (showCollision) {
-                this.context.save();
-                this.context.strokeStyle = "rgba(255,0,255,1)";
-                this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
+                this.renderer.save();
+                this.renderer.setStrokeStyle("rgba(255,0,255,1)");
+                this.renderer.strokeRect(posX, posY, this.comment.width, this.comment.height);
                 for (let i = 0, n = this.comment.lineCount; i < n; i++) {
                     const linePosY = ((i + 1) * (this.comment.fontSize * this.comment.lineHeight) +
-                        config.commentYPaddingTop[this.comment.resizedY ? "resized" : "default"]) *
+                        config.flashCommentYPaddingTop[this.comment.resizedY ? "resized" : "default"]) *
                         this.comment.scale;
-                    this.context.strokeStyle = `rgba(255,255,0,0.25)`;
-                    this.context.strokeRect(posX, posY + linePosY * this._globalScale, this.comment.width, this.comment.fontSize *
+                    this.renderer.setStrokeStyle(`rgba(255,255,0,0.25)`);
+                    this.renderer.strokeRect(posX, posY + linePosY * this._globalScale, this.comment.width, this.comment.fontSize *
                         this.comment.lineHeight *
                         -1 *
                         this._globalScale *
                         this.comment.scale *
                         (this.comment.layer === -1 ? options.scale : 1));
                 }
-                this.context.restore();
+                this.renderer.restore();
             }
         }
         _generateTextImage() {
-            const { image, context } = this.createCanvas();
-            this._setupCanvas(image, context);
+            const renderer = this.renderer.getCanvas();
+            this._setupCanvas(renderer);
             const atButtonPadding = getConfig(config.atButtonPadding, true);
             const lineOffset = this.comment.lineOffset;
             const lineHeight = this.comment.fontSize * this.comment.lineHeight;
             const offsetKey = this.comment.resizedY ? "resized" : "default";
-            const offsetY = config.commentYPaddingTop[offsetKey] +
+            const offsetY = config.flashCommentYPaddingTop[offsetKey] +
                 this.comment.fontSize *
                     this.comment.lineHeight *
-                    config.commentYOffset[this.comment.size][offsetKey];
+                    config.flashCommentYOffset[this.comment.size][offsetKey];
             let lastFont = this.comment.font, leftOffset = 0, lineCount = 0, isLastButton = false;
             for (const item of this.comment.content) {
+                if (item.type === "spacer") {
+                    leftOffset += item.count * item.charWidth * this.comment.fontSize;
+                    isLastButton = !!item.isButton;
+                    continue;
+                }
                 const font = item.font ?? this.comment.font;
                 if (lastFont !== font) {
                     lastFont = font;
-                    context.font = parseFont(font, this.comment.fontSize);
+                    renderer.setFont(parseFont(font, this.comment.fontSize));
                 }
                 const lines = item.slicedContent;
                 for (let lineIndex = 0, lineLength = lines.length; lineIndex < lineLength; lineIndex++) {
@@ -1965,42 +3354,45 @@
                         ((!isLastButton && item.isButton) || (isLastButton && !item.isButton))) {
                         leftOffset += atButtonPadding * 2;
                     }
-                    context.strokeText(line, leftOffset, posY);
-                    context.fillText(line, leftOffset, posY);
+                    renderer.strokeText(line, leftOffset, posY);
+                    renderer.fillText(line, leftOffset, posY);
+                    leftOffset += partWidth;
                     if (lineIndex < lineLength - 1) {
                         leftOffset = 0;
                         lineCount += 1;
-                        continue;
                     }
-                    leftOffset += partWidth;
                 }
                 isLastButton = !!item.isButton;
             }
-            return image;
+            return renderer;
         }
         getButtonImage(posX, posY, cursor) {
             if (!this.comment.button || this.comment.button.hidden)
                 return undefined;
-            const { image, context } = this._setupCanvas(this.buttonImage, this.buttonContext);
+            const { renderer } = this._setupCanvas(this.buttonImage);
             const parts = this.comment.buttonObjects;
             if (!parts)
                 return undefined;
             const atButtonRadius = getConfig(config.atButtonRadius, true);
             const isHover = this.isHovered(cursor, posX, posY);
-            context.save();
-            context.strokeStyle =
-                this.comment.button.limit < 1
-                    ? "#777777"
-                    : isHover
-                        ? this.comment.color
-                        : "white";
-            drawLeftBorder(context, parts.left.left, parts.left.top, parts.left.width, parts.left.height, atButtonRadius);
+            renderer.save();
+            const getStrokeStyle = () => {
+                if (isHover) {
+                    return this.comment.color;
+                }
+                if (this.comment.button && this.comment.button.limit < 1) {
+                    return "#777777";
+                }
+                return "white";
+            };
+            renderer.setStrokeStyle(getStrokeStyle());
+            drawLeftBorder(renderer, parts.left.left, parts.left.top, parts.left.width, parts.left.height, atButtonRadius);
             for (const part of parts.middle) {
-                drawMiddleBorder(context, part.left, part.top, part.width, part.height);
+                drawMiddleBorder(renderer, part.left, part.top, part.width, part.height);
             }
-            drawRightBorder(context, parts.right.right, parts.right.top, parts.right.height, atButtonRadius);
-            context.restore();
-            return image;
+            drawRightBorder(renderer, parts.right.right, parts.right.top, parts.right.height, atButtonRadius);
+            renderer.restore();
+            return renderer;
         }
         isHovered(_cursor, _posX, _posY) {
             if (!_cursor || !this.comment.buttonObjects)
@@ -2034,22 +3426,18 @@
             }
             return (between(cursor.x, posX + right.right - atButtonPadding, posX + right.right + getConfig(config.contextLineWidth, true) / 2) && between(cursor.y, posY + right.top, posY + right.top + right.height));
         }
-        _setupCanvas(image, context) {
+        _setupCanvas(renderer) {
             const atButtonPadding = getConfig(config.atButtonPadding, true);
-            image.width = this.comment.width;
-            image.height =
-                this.comment.height + (this.comment.button ? atButtonPadding * 2 : 0);
-            context.strokeStyle = getStrokeColor(this.comment);
-            context.fillStyle = this.comment.color;
-            context.textAlign = "start";
-            context.textBaseline = "alphabetic";
-            context.lineWidth = getConfig(config.contextLineWidth, true);
-            context.font = parseFont(this.comment.font, this.comment.fontSize);
+            renderer.setSize(this.comment.width, this.comment.height + (this.comment.button ? atButtonPadding * 2 : 0));
+            renderer.setStrokeStyle(getStrokeColor(this.comment));
+            renderer.setFillStyle(this.comment.color);
+            renderer.setLineWidth(getConfig(config.contextLineWidth, true));
+            renderer.setFont(parseFont(this.comment.font, this.comment.fontSize));
             const scale = this._globalScale *
                 this.comment.scale *
                 (this.comment.layer === -1 ? options.scale : 1);
-            context.scale(scale * this.comment.scaleX, scale);
-            return { image, context };
+            renderer.setScale(scale * this.comment.scaleX, scale);
+            return { renderer };
         }
     }
 
@@ -2072,10 +3460,7 @@
                 lineOffset,
             };
             this.comment = this.getCommentSize(comment);
-            this.cacheKey =
-                JSON.stringify(this.comment.content) +
-                    `@@${this.pluginName}@@` +
-                    [...this.comment.mail].sort().join(",");
+            this.cacheKey = this.getCacheKey();
             delete this.image;
         }
         convertComment(comment) {
@@ -2083,7 +3468,6 @@
         }
         getCommentSize(parsedData) {
             if (parsedData.invisible) {
-                this.context.restore();
                 return {
                     ...parsedData,
                     height: 0,
@@ -2099,15 +3483,15 @@
                     scale: 1,
                 };
             }
-            this.context.save();
-            this.context.font = parseFont(parsedData.font, parsedData.fontSize);
+            this.renderer.save();
+            this.renderer.setFont(parseFont(parsedData.font, parsedData.fontSize));
             const measure = this.measureText({ ...parsedData, scale: 1 });
             if (options.scale !== 1 && parsedData.layer === -1) {
                 measure.height *= options.scale;
                 measure.width *= options.scale;
                 measure.fontSize *= options.scale;
             }
-            this.context.restore();
+            this.renderer.restore();
             return {
                 ...parsedData,
                 height: measure.height,
@@ -2125,7 +3509,7 @@
         }
         parseCommandAndNicoscript(comment) {
             const data = parseCommandAndNicoScript(comment);
-            const { content, lineCount, lineOffset } = this.parseContent(comment.content);
+            const { content, lineCount, lineOffset } = this.parseContent(comment.content, data.font);
             return {
                 ...comment,
                 rawContent: comment.content,
@@ -2135,15 +3519,10 @@
                 lineOffset,
             };
         }
-        parseContent(input) {
+        parseContent(input, font) {
             const content = [];
-            content.push({
-                content: input,
-                slicedContent: input.split("\n"),
-            });
-            const lineCount = content.reduce((pv, val) => {
-                return pv + (val.content.match(/\n/g)?.length ?? 0);
-            }, 1);
+            addHTML5PartToResult(content, input, font ?? "defont");
+            const lineCount = input.split("\n").length;
             const lineOffset = 0;
             return {
                 content,
@@ -2159,7 +3538,7 @@
             if (!comment.charSize)
                 comment.charSize = charSize;
             comment.fontSize = comment.charSize * 0.8;
-            this.context.font = parseFont(comment.font, comment.fontSize);
+            this.renderer.setFont(parseFont(comment.font, comment.fontSize));
             if (isLineBreakResize(comment)) {
                 comment.fontSize = configFontSize[comment.size].resized;
                 const lineHeight = getLineHeight(comment.size, false, true);
@@ -2171,7 +3550,7 @@
             const { width, height, itemWidth } = this._measureComment(comment);
             for (let i = 0, n = comment.content.length; i < n; i++) {
                 const item = comment.content[i];
-                if (!item || !itemWidth)
+                if (item?.type !== "text" || !itemWidth)
                     continue;
                 item.width = itemWidth[i];
             }
@@ -2194,17 +3573,17 @@
             };
         }
         _measureComment(comment) {
-            const widthLimit = getConfig(config.CommentStageSize, false)[comment.full ? "fullWidth" : "width"];
+            const widthLimit = getConfig(config.commentStageSize, false)[comment.full ? "fullWidth" : "width"];
             if (!typeGuard.internal.MeasureInput(comment))
                 throw new TypeGuardError();
-            const measureResult = measure(comment, this.context);
+            const measureResult = measure(comment, this.renderer);
             if (comment.loc !== "naka" && measureResult.width > widthLimit) {
                 return this._processResizeX(comment, measureResult.width);
             }
             return measureResult;
         }
         _processResizeX(comment, width) {
-            const widthLimit = getConfig(config.CommentStageSize, false)[comment.full ? "fullWidth" : "width"];
+            const widthLimit = getConfig(config.commentStageSize, false)[comment.full ? "fullWidth" : "width"];
             const lineHeight = getLineHeight(comment.size, false);
             const charSize = getCharSize(comment.size, false);
             const scale = widthLimit / width;
@@ -2215,14 +3594,14 @@
             _comment.fontSize = _comment.charSize * 0.8;
             if (!typeGuard.internal.MeasureInput(_comment))
                 throw new TypeGuardError();
-            let result = measure(_comment, this.context);
+            let result = measure(_comment, this.renderer);
             if (result.width > widthLimit) {
                 while (result.width >= widthLimit) {
                     const originalCharSize = _comment.charSize;
                     _comment.charSize -= 1;
                     _comment.lineHeight *= _comment.charSize / originalCharSize;
                     _comment.fontSize = _comment.charSize * 0.8;
-                    result = measure(_comment, this.context);
+                    result = measure(_comment, this.renderer);
                 }
             }
             else {
@@ -2233,7 +3612,7 @@
                     _comment.charSize += 1;
                     _comment.lineHeight *= _comment.charSize / originalCharSize;
                     _comment.fontSize = _comment.charSize * 0.8;
-                    result = measure(_comment, this.context);
+                    result = measure(_comment, this.renderer);
                 }
                 _comment = lastComment;
             }
@@ -2249,54 +3628,54 @@
             comment.fontSize = (comment.charSize ?? 0) * 0.8;
             if (!typeGuard.internal.MeasureInput(comment))
                 throw new TypeGuardError();
-            return measure(comment, this.context);
+            return measure(comment, this.renderer);
         }
         _drawCollision(posX, posY, showCollision) {
             if (showCollision) {
-                this.context.save();
+                this.renderer.save();
                 const scale = getConfig(config.commentScale, false);
-                this.context.strokeStyle = "rgba(0,255,255,1)";
-                this.context.strokeRect(posX, posY, this.comment.width, this.comment.height);
+                this.renderer.setStrokeStyle("rgba(0,255,255,1)");
+                this.renderer.strokeRect(posX, posY, this.comment.width, this.comment.height);
                 for (let i = 0, n = this.comment.lineCount; i < n; i++) {
                     if (!typeGuard.internal.HTML5Fonts(this.comment.font))
                         throw new TypeGuardError();
                     const linePosY = (this.comment.lineHeight * (i + 1) +
                         (this.comment.charSize - this.comment.lineHeight) / 2 +
                         this.comment.lineHeight * -0.16 +
-                        (config.fonts[this.comment.font]?.offset || 0)) *
+                        (config.fonts.html5[this.comment.font]?.offset || 0)) *
                         scale;
-                    this.context.strokeStyle = "rgba(255,255,0,0.5)";
-                    this.context.strokeRect(posX, posY + linePosY, this.comment.width, this.comment.fontSize * -1 * scale);
+                    this.renderer.setStrokeStyle("rgba(255,255,0,0.5)");
+                    this.renderer.strokeRect(posX, posY + linePosY, this.comment.width, this.comment.fontSize * -1 * scale);
                 }
-                this.context.restore();
+                this.renderer.restore();
             }
         }
         _generateTextImage() {
             const { fontSize, scale } = getFontSizeAndScale(this.comment.charSize);
             const paddingTop = (10 - scale * 10) *
-                ((this.comment.lineCount + 1) / config.hiResCommentCorrection);
+                ((this.comment.lineCount + 1) / config.html5HiResCommentCorrection);
             const drawScale = getConfig(config.commentScale, false) *
                 scale *
                 (this.comment.layer === -1 ? options.scale : 1);
-            const { image, context } = this.createCanvas();
-            image.width = this.comment.width + 2 * 2 * this.comment.charSize;
-            image.height =
-                this.comment.height +
-                    (((paddingTop + 1) * this.comment.lineHeight) / scale) * drawScale;
-            context.strokeStyle = getStrokeColor(this.comment);
-            context.fillStyle = this.comment.color;
-            context.textAlign = "start";
-            context.textBaseline = "alphabetic";
-            context.lineWidth = getConfig(config.contextLineWidth, false);
-            context.font = parseFont(this.comment.font, fontSize);
-            context.scale(drawScale, drawScale);
+            const image = this.renderer.getCanvas();
+            image.setSize(this.comment.width + 2 * 2 * this.comment.charSize, this.comment.height +
+                (((paddingTop + 1) * this.comment.lineHeight) / scale) * drawScale);
+            image.setStrokeStyle(getStrokeColor(this.comment));
+            image.setFillStyle(this.comment.color);
+            image.setLineWidth(getConfig(config.contextLineWidth, false));
+            image.setFont(parseFont(this.comment.font, fontSize));
+            image.setScale(drawScale);
             let lineCount = 0;
             if (!typeGuard.internal.HTML5Fonts(this.comment.font))
                 throw new TypeGuardError();
             const offsetY = (this.comment.charSize - this.comment.lineHeight) / 2 +
                 this.comment.lineHeight * -0.16 +
-                (config.fonts[this.comment.font]?.offset || 0);
+                (config.fonts.html5[this.comment.font]?.offset || 0);
             for (const item of this.comment.content) {
+                if (item?.type === "spacer") {
+                    lineCount += item.count * item.charWidth * this.comment.fontSize;
+                    continue;
+                }
                 const lines = item.slicedContent;
                 for (let j = 0, n = lines.length; j < n; j++) {
                     const line = lines[j];
@@ -2304,8 +3683,8 @@
                         continue;
                     const posY = (this.comment.lineHeight * (lineCount + 1 + paddingTop) + offsetY) /
                         scale;
-                    context.strokeText(line, 0, posY);
-                    context.fillText(line, 0, posY);
+                    image.strokeText(line, 0, posY);
+                    image.fillText(line, 0, posY);
                     lineCount += 1;
                 }
             }
@@ -2319,7 +3698,7 @@
         }
     }
 
-    var index = /*#__PURE__*/Object.freeze({
+    var index$1 = /*#__PURE__*/Object.freeze({
         __proto__: null,
         BaseComment: BaseComment,
         FlashComment: FlashComment,
@@ -2500,7 +3879,7 @@
                 html5: 1920 / 683,
                 flash: 1920 / 683,
             },
-            CommentStageSize: {
+            commentStageSize: {
                 html5: {
                     width: 512,
                     fullWidth: 683,
@@ -2542,7 +3921,7 @@
                     },
                 },
             },
-            lineCounts: {
+            html5LineCounts: {
                 default: {
                     big: 8.4,
                     medium: 13.1,
@@ -2559,9 +3938,15 @@
                     small: 16.6,
                 },
             },
-            hiResCommentCorrection: 20,
-            minFontSize: 10,
-            fonts: fonts[platform],
+            html5HiResCommentCorrection: 20,
+            html5MinFontSize: 10,
+            fonts: {
+                html5: fonts[platform],
+                flash: {
+                    gulim: `normal 600 [size]px gulim, ${fonts[platform].gothic.font}, Arial`,
+                    simsun: `normal 400 [size]px simsun, batang, "PMingLiU", MingLiU-ExtB, ${fonts[platform].mincho.font}, Arial`,
+                },
+            },
             fpsInterval: 500,
             cacheAge: 2000,
             canvasWidth: 1920,
@@ -2572,6 +3957,7 @@
                 left: 235,
                 right: 1685,
             },
+            collisionPadding: 5,
             sameCARange: 3600,
             sameCAGap: 100,
             sameCAMinScore: 10,
@@ -2579,20 +3965,16 @@
             plugins: [],
             flashThreshold: 1499871600,
             flashChar: {
-                gulim: "[\u0126\u0127\u0132\u0133\u0138\u013f\u0140\u0149-\u014b\u0166\u0167\u02d0\u02da\u2074\u207f\u2081-\u2084\u2113\u2153\u2154\u215c-\u215e\u2194\u2195\u223c\u249c-\u24b5\u24d0-\u24e9\u25a3-\u25a9\u25b6\u25b7\u25c0\u25c1\u25c8\u25d0\u25d1\u260e\u260f\u261c\u261e\u2660\u2661\u2663-\u2665\u2667-\u2669\u266c\u3131-\u316e\u3200-\u321c\u3260-\u327b\u3380-\u3384\u3388-\u338d\u3390-\u339b\u339f\u33a0\u33a2-\u33ca\u33cf\u33d0\u33d3\u33d6\u33d8\u33db-\u33dd\uf900-\uf928\uf92a-\uf994\uf996\ufa0b\uffe6]",
+                gulim: "[\u0126\u0127\u0132\u0133\u0138\u013f\u0140\u0149-\u014b\u0166\u0167\u02d0\u02da\u2074\u207f\u2081-\u2084\u2113\u2153\u2154\u215c-\u215e\u2194\u2195\u223c\u249c-\u24b5\u24d0-\u24e9\u25a3-\u25a9\u25b6\u25b7\u25c0\u25c1\u25c8\u25d0\u25d1\u260e\u260f\u261c\u261e\u2660\u2661\u2663-\u2665\u2667-\u2669\u266c\u3131-\u316e\u3200-\u321c\u3260-\u327b\u3380-\u3384\u3388-\u338d\u3390-\u339b\u339f\u33a0\u33a2-\u33ca\u33cf\u33d0\u33d3\u33d6\u33d8\u33db-\u33dd\uac00-\ud7a3\uf900-\uf928\uf92a-\uf994\uf996\ufa0b\uffe6]",
                 simsunStrong: "[\u01ce\u01d0\u01d2\u01d4\u01d6\u01d8\u01da\u01dc\u0251\u0261\u02ca\u02cb\u2016\u2035\u216a\u216b\u2223\u2236\u2237\u224c\u226e\u226f\u2295\u2483-\u249b\u2504-\u250b\u256d-\u2573\u2581-\u2583\u2585-\u2587\u2589-\u258b\u258d-\u258f\u2594\u2595\u25e2-\u25e5\u2609\u3016\u3017\u301e\u3021-\u3029\u3105-\u3129\u3220-\u3229\u32a3\u33ce\u33d1\u33d2\u33d5\ue758-\ue864\ufa0c\ufa0d\ufe30\ufe31\ufe33-\ufe44\ufe49-\ufe52\ufe54-\ufe57\ufe59-\ufe66\ufe68-\ufe6b]",
                 simsunWeak: "[\u02c9\u2105\u2109\u2196-\u2199\u220f\u2215\u2248\u2264\u2265\u2299\u2474-\u2482\u250d\u250e\u2511\u2512\u2515\u2516\u2519\u251a\u251e\u251f\u2521\u2522\u2526\u2527\u2529\u252a\u252d\u252e\u2531\u2532\u2535\u2536\u2539\u253a\u253d\u253e\u2540\u2541\u2543-\u254a\u2550-\u256c\u2584\u2588\u258c\u2593]",
-                gothic: "[\u03fb\uff9f]",
+                gothic: "[\u03fb\uff9f\u30fb]",
             },
-            FlashMode: "vista",
-            FlashScriptChar: {
+            flashMode: "vista",
+            flashScriptChar: {
                 super: "[\u00aa\u00b2\u00b3\u00b9\u00ba\u02b0\u02b2\u02b3\u02b7\u02b8\u02e1-\u02e3\u0304\u1d2c-\u1d43\u1d45-\u1d61\u1d9b-\u1da1\u1da3-\u1dbf\u2070\u2071\u2074-\u207f\u2c7d]",
                 sub: "[\u0320\u1d62-\u1d6a\u2080-\u208e\u2090-\u209c\u2c7c]",
             },
-            font: {
-                gulim: 'normal 600 [size]px gulim, "Microsoft JhengHei UI", Arial, "ＭＳ Ｐゴシック", "MS PGothic", MSPGothic, MS-PGothic',
-                simsun: 'normal 400 [size]px simsun, "游明朝体", "游明朝", "Yu Mincho", YuMincho, yumincho, YuMin-Medium',
-            },
             lineHeight: {
                 small: {
                     default: 18 / 15,
@@ -2607,26 +3989,17 @@
                     resized: 24 / 19.5,
                 },
             },
-            doubleResizeMaxWidth: {
-                full: 1200,
-                normal: 960,
-            },
-            commentYPaddingTop: {
+            flashCommentYPaddingTop: {
                 default: 5,
                 resized: 3,
             },
-            commentYMarginBottom: {
-                small: 0.24,
-                medium: 0.28,
-                big: 0.24,
-            },
-            commentYOffset: {
+            flashCommentYOffset: {
                 small: { default: -0.2, resized: -0.2 },
                 medium: { default: -0.2, resized: -0.2 },
                 big: { default: -0.2, resized: -0.2 },
             },
-            letterSpacing: 1,
-            scriptCharOffset: 0.12,
+            flashLetterSpacing: 1,
+            flashScriptCharOffset: 0.12,
             commentLimit: undefined,
             hideCommentOrder: "asc",
             lineBreakCount: {
@@ -2643,6 +4016,50 @@
             nakaCommentSpeedOffset: 0.95,
             atButtonPadding: 5,
             atButtonRadius: 7,
+            flashDoubleResizeHeights: {
+                big: {
+                    9: 392,
+                    10: 384,
+                    11: 389,
+                    12: 388,
+                    13: 381,
+                    14: 381,
+                    15: 384,
+                },
+            },
+            flashLineBreakScale: {
+                small: 0.557,
+                medium: 0.519,
+                big: 0.535,
+            },
+            compatSpacer: {
+                flash: {
+                    "\u3000": {
+                        simsun: 0.98,
+                        defont: 0.645,
+                        gulim: 0.95,
+                    },
+                    "\u00a0": {
+                        simsun: 0.25,
+                    },
+                    "\u0020": {
+                        defont: 0.3,
+                    },
+                    "\u2001": {
+                        defont: 0.95,
+                    },
+                    "\u2004": {
+                        defont: 1.6,
+                    },
+                    "\u2007": {
+                        defont: 1.6,
+                    },
+                    "\u202a": {
+                        defont: 0.59,
+                    },
+                },
+                html5: {},
+            },
         };
         updateConfig(defaultConfig);
     };
@@ -2754,32 +4171,44 @@
 
     const convert2formattedComment = (data, type) => {
         let result = [];
+        try {
+            result = parseComments(data, type);
+        }
+        catch (e) {
+            if (e instanceof ValiError) {
+                console.error("", e.issues);
+            }
+        }
+        return sort(result);
+    };
+    const parseComments = (data, type) => {
         if (type === "empty" && data === undefined) {
             return [];
         }
         else if ((type === "XMLDocument" || type === "niconicome") &&
             typeGuard.xmlDocument(data)) {
-            result = fromXMLDocument(data);
+            return fromXMLDocument(data);
         }
-        else if (type === "formatted" && typeGuard.formatted.legacyComments(data)) {
-            result = fromFormatted(data);
+        else if (type === "formatted") {
+            return fromFormatted(parse(array(ZFormattedComment), data));
         }
-        else if (type === "legacy" && typeGuard.legacy.rawApiResponses(data)) {
-            result = fromLegacy(data);
+        else if (type === "legacy") {
+            return fromLegacy(parse(array(ZRawApiResponse), data));
         }
-        else if (type === "legacyOwner" && typeGuard.legacyOwner.comments(data)) {
-            result = fromLegacyOwner(data);
+        else if (type === "legacyOwner") {
+            if (!typeGuard.legacyOwner.comments(data))
+                throw new InvalidFormatError();
+            return fromLegacyOwner(data);
         }
-        else if (type === "owner" && typeGuard.owner.comments(data)) {
-            result = fromOwner(data);
+        else if (type === "owner") {
+            return fromOwner(parse(array(ZOwnerComment), data));
         }
-        else if (type === "v1" && typeGuard.v1.threads(data)) {
-            result = fromV1(data);
+        else if (type === "v1") {
+            return fromV1(parse(array(ZV1Thread), data));
         }
         else {
             throw new InvalidFormatError();
         }
-        return sort(result);
     };
     const fromXMLDocument = (data) => {
         const data_ = [], userList = [];
@@ -2820,24 +4249,15 @@
         return data_;
     };
     const fromFormatted = (data) => {
-        return data.map((comment) => {
-            if (!typeGuard.formatted.comment(comment)) {
-                return {
-                    ...comment,
-                    layer: -1,
-                    user_id: 0,
-                    is_my_post: false,
-                };
-            }
-            return comment;
-        });
+        return data;
     };
     const fromLegacy = (data) => {
         const data_ = [], userList = [];
-        for (const val of data) {
-            if (!typeGuard.legacy.apiChat(val.chat))
+        for (const _val of data) {
+            const val = safeParse(ZApiChat, _val.chat);
+            if (!val.success)
                 continue;
-            const value = val.chat;
+            const value = val.output;
             if (value.deleted !== 1) {
                 const tmpParam = {
                     id: value.no,
@@ -2990,8 +4410,8 @@
         });
         return data;
     };
-    const time2vpos = (time_str) => {
-        const time = RegExp(/^(?:(\d+):(\d+)\.(\d+)|(\d+):(\d+)|(\d+)\.(\d+)|(\d+))$/).exec(time_str);
+    const time2vpos = (input) => {
+        const time = RegExp(/^(?:(\d+):(\d+)\.(\d+)|(\d+):(\d+)|(\d+)\.(\d+)|(\d+))$/).exec(input);
         if (time) {
             if (time[1] !== undefined &&
                 time[2] !== undefined &&
@@ -3019,6 +4439,123 @@
         default: convert2formattedComment
     });
 
+    class CanvasRenderer {
+        canvas;
+        video;
+        context;
+        constructor(canvas, video) {
+            this.canvas = canvas ?? document.createElement("canvas");
+            const context = this.canvas.getContext("2d");
+            if (!context)
+                throw new CanvasRenderingContext2DError();
+            this.context = context;
+            this.context.textAlign = "start";
+            this.context.textBaseline = "alphabetic";
+            this.video = video;
+        }
+        drawVideo(enableLegacyPip) {
+            if (this.video) {
+                let scale;
+                const height = this.canvas.height / this.video.videoHeight, width = this.canvas.width / this.video.videoWidth;
+                if (enableLegacyPip ? height > width : height < width) {
+                    scale = width;
+                }
+                else {
+                    scale = height;
+                }
+                const offsetX = (this.canvas.width - this.video.videoWidth * scale) * 0.5, offsetY = (this.canvas.height - this.video.videoHeight * scale) * 0.5;
+                this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
+            }
+        }
+        getFont() {
+            return this.context.font;
+        }
+        getFillStyle() {
+            return this.context.fillStyle;
+        }
+        setScale(scale, arg1) {
+            this.context.scale(scale, arg1 ?? scale);
+        }
+        drawImage(image, x, y, width, height) {
+            if (width === undefined || height === undefined)
+                this.context.drawImage(image.canvas, x, y);
+            else
+                this.context.drawImage(image.canvas, x, y, width, height);
+        }
+        fillRect(x, y, width, height) {
+            this.context.fillRect(x, y, width, height);
+        }
+        strokeRect(x, y, width, height) {
+            this.context.strokeRect(x, y, width, height);
+        }
+        fillText(text, x, y) {
+            this.context.fillText(text, x, y);
+        }
+        strokeText(text, x, y) {
+            this.context.strokeText(text, x, y);
+        }
+        quadraticCurveTo(cpx, cpy, x, y) {
+            this.context.quadraticCurveTo(cpx, cpy, x, y);
+        }
+        clearRect(x, y, width, height) {
+            this.context.clearRect(x, y, width, height);
+        }
+        setFont(font) {
+            this.context.font = font;
+        }
+        setFillStyle(color) {
+            this.context.fillStyle = color;
+        }
+        setStrokeStyle(color) {
+            this.context.strokeStyle = color;
+        }
+        setLineWidth(width) {
+            this.context.lineWidth = width;
+        }
+        setGlobalAlpha(alpha) {
+            this.context.globalAlpha = alpha;
+        }
+        setSize(width, height) {
+            this.canvas.width = width;
+            this.canvas.height = height;
+        }
+        getSize() {
+            return { width: this.canvas.width, height: this.canvas.height };
+        }
+        measureText(text) {
+            return this.context.measureText(text);
+        }
+        beginPath() {
+            this.context.beginPath();
+        }
+        closePath() {
+            this.context.closePath();
+        }
+        moveTo(x, y) {
+            this.context.moveTo(x, y);
+        }
+        lineTo(x, y) {
+            this.context.lineTo(x, y);
+        }
+        stroke() {
+            this.context.stroke();
+        }
+        save() {
+            this.context.save();
+        }
+        restore() {
+            this.context.restore();
+        }
+        getCanvas() {
+            return new CanvasRenderer();
+        }
+    }
+
+    var index = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        CanvasRenderer: CanvasRenderer
+    });
+
     const createCommentInstance = (comment, context) => {
         for (const plugin of config.commentPlugins) {
             if (plugin.condition(comment)) {
@@ -3037,14 +4574,15 @@
 
     var internal = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        comments: index,
-        contexts: index$3,
+        comments: index$1,
+        contexts: index$4,
         definition: definition,
-        errors: index$2,
+        errors: index$3,
         eventHandler: eventHandler,
         inputParser: inputParser,
+        renderer: index,
         typeGuard: typeGuard$1,
-        utils: index$1
+        utils: index$2
     });
 
     class NiconiComments {
@@ -3052,11 +4590,9 @@
         showCollision;
         showFPS;
         showCommentCount;
-        video;
         lastVpos;
-        canvas;
+        renderer;
         collision;
-        context;
         timeline;
         static typeGuard = typeGuard;
         static default = NiconiComments;
@@ -3065,7 +4601,7 @@
             class: FlashComment,
         };
         static internal = internal;
-        constructor(canvas, data, initOptions = {}) {
+        constructor(renderer, data, initOptions = {}) {
             const constructorStart = performance.now();
             initConfig();
             if (!typeGuard.config.initOptions(initOptions))
@@ -3075,11 +4611,14 @@
             setIsDebug(options.debug);
             resetImageCache();
             resetNicoScripts();
-            this.canvas = canvas;
-            this.context = getContext(canvas);
-            this.context.textAlign = "start";
-            this.context.textBaseline = "alphabetic";
-            this.context.lineWidth = getConfig(config.contextLineWidth, false);
+            if (renderer instanceof HTMLCanvasElement) {
+                renderer = new CanvasRenderer(renderer, options.video);
+            }
+            else if (options.video) {
+                console.warn("options.video is ignored because renderer is not HTMLCanvasElement");
+            }
+            this.renderer = renderer;
+            this.renderer.setLineWidth(getConfig(config.contextLineWidth, false));
             let formatType = options.format;
             if (options.formatted) {
                 console.warn("Deprecated: options.formatted is no longer recommended. Please use options.format. https://xpadev-net.github.io/niconicomments/#p_format");
@@ -3094,7 +4633,6 @@
                 options.mode = "html5";
             }
             const parsedData = convert2formattedComment(data, formatType);
-            this.video = options.video ?? undefined;
             this.showCollision = options.showCollision;
             this.showFPS = options.showFPS;
             this.showCommentCount = options.showCommentCount;
@@ -3116,7 +4654,7 @@
                 rawData = changeCALayer(rawData);
             }
             let instances = rawData.reduce((pv, val) => {
-                pv.push(createCommentInstance(val, this.context));
+                pv.push(createCommentInstance(val, this.renderer));
                 return pv;
             }, []);
             this.getCommentPos(instances);
@@ -3124,7 +4662,7 @@
             const plugins = [];
             for (const plugin of config.plugins) {
                 try {
-                    const canvas = generateCanvas();
+                    const canvas = this.renderer.getCanvas();
                     const pluginInstance = new plugin(canvas, instances);
                     plugins.push({
                         canvas,
@@ -3176,7 +4714,7 @@
         }
         addComments(...rawComments) {
             const comments = rawComments.reduce((pv, val) => {
-                pv.push(createCommentInstance(val, this.context));
+                pv.push(createCommentInstance(val, this.renderer));
                 return pv;
             }, []);
             for (const plugin of plugins) {
@@ -3211,19 +4749,20 @@
                     ?.length === 0) {
                 const current = timelineRange.filter((item) => item.loc !== "naka"), last = this.timeline[this.lastVpos]?.filter((item) => item.loc !== "naka") ??
                     [];
-                if (ArrayEqual(current, last))
+                if (arrayEqual(current, last))
                     return false;
             }
-            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            const size = this.renderer.getSize();
+            this.renderer.clearRect(0, 0, size.width, size.height);
             this.lastVpos = vpos;
             this._drawVideo();
             for (const plugin of plugins) {
                 try {
                     plugin.instance.draw?.(vpos);
-                    this.context.drawImage(plugin.canvas, 0, 0);
+                    this.renderer.drawImage(plugin.canvas, 0, 0);
                 }
                 catch (e) {
-                    console.error(`Failed to draw comments`);
+                    console.error(`Failed to draw comments`, e);
                 }
             }
             this._drawCollision(vpos);
@@ -3234,18 +4773,7 @@
             return true;
         }
         _drawVideo() {
-            if (this.video) {
-                let scale;
-                const height = this.canvas.height / this.video.videoHeight, width = this.canvas.width / this.video.videoWidth;
-                if (this.enableLegacyPiP ? height > width : height < width) {
-                    scale = width;
-                }
-                else {
-                    scale = height;
-                }
-                const offsetX = (this.canvas.width - this.video.videoWidth * scale) * 0.5, offsetY = (this.canvas.height - this.video.videoHeight * scale) * 0.5;
-                this.context.drawImage(this.video, offsetX, offsetY, this.video.videoWidth * scale, this.video.videoHeight * scale);
-            }
+            this.renderer.drawVideo(this.enableLegacyPiP);
         }
         _drawComments(timelineRange, vpos, cursor) {
             if (timelineRange) {
@@ -3268,44 +4796,44 @@
         }
         _drawCollision(vpos) {
             if (this.showCollision) {
-                this.context.save();
+                this.renderer.save();
                 const leftCollision = this.collision.left[vpos], rightCollision = this.collision.right[vpos];
-                this.context.fillStyle = "red";
+                this.renderer.setFillStyle("red");
                 if (leftCollision) {
                     for (const comment of leftCollision) {
-                        this.context.fillRect(config.collisionRange.left, comment.posY, getConfig(config.contextLineWidth, comment.flash), comment.height);
+                        this.renderer.fillRect(config.collisionRange.left, comment.posY, getConfig(config.contextLineWidth, comment.flash), comment.height);
                     }
                 }
                 if (rightCollision) {
                     for (const comment of rightCollision) {
-                        this.context.fillRect(config.collisionRange.right, comment.posY, getConfig(config.contextLineWidth, comment.flash) * -1, comment.height);
+                        this.renderer.fillRect(config.collisionRange.right, comment.posY, getConfig(config.contextLineWidth, comment.flash) * -1, comment.height);
                     }
                 }
-                this.context.restore();
+                this.renderer.restore();
             }
         }
         _drawFPS(drawCanvasStart) {
             if (this.showFPS) {
-                this.context.save();
-                this.context.font = parseFont("defont", 60);
-                this.context.fillStyle = "#00FF00";
-                this.context.strokeStyle = `rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
+                this.renderer.save();
+                this.renderer.setFont(parseFont("defont", 60));
+                this.renderer.setFillStyle("#00FF00");
+                this.renderer.setStrokeStyle(`rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`);
                 const drawTime = Math.floor(performance.now() - drawCanvasStart);
                 const fps = Math.floor(1000 / (drawTime === 0 ? 1 : drawTime));
-                this.context.strokeText(`FPS:${fps}(${drawTime}ms)`, 100, 100);
-                this.context.fillText(`FPS:${fps}(${drawTime}ms)`, 100, 100);
-                this.context.restore();
+                this.renderer.strokeText(`FPS:${fps}(${drawTime}ms)`, 100, 100);
+                this.renderer.fillText(`FPS:${fps}(${drawTime}ms)`, 100, 100);
+                this.renderer.restore();
             }
         }
         _drawCommentCount(count) {
             if (this.showCommentCount) {
-                this.context.save();
-                this.context.font = parseFont("defont", 60);
-                this.context.fillStyle = "#00FF00";
-                this.context.strokeStyle = `rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`;
-                this.context.strokeText(`Count:${count ?? 0}`, 100, 200);
-                this.context.fillText(`Count:${count ?? 0}`, 100, 200);
-                this.context.restore();
+                this.renderer.save();
+                this.renderer.setFont(parseFont("defont", 60));
+                this.renderer.setFillStyle("#00FF00");
+                this.renderer.setStrokeStyle(`rgba(${hex2rgb(config.contextStrokeColor).join(",")},${config.contextStrokeOpacity})`);
+                this.renderer.strokeText(`Count:${count ?? 0}`, 100, 200);
+                this.renderer.fillText(`Count:${count ?? 0}`, 100, 200);
+                this.renderer.restore();
             }
         }
         addEventListener(eventName, handler) {
@@ -3315,7 +4843,8 @@
             removeHandler(eventName, handler);
         }
         clear() {
-            this.context.clearRect(0, 0, config.canvasWidth, config.canvasHeight);
+            const size = this.renderer.getSize();
+            this.renderer.clearRect(0, 0, size.width, size.height);
         }
         click(vpos, pos) {
             const _comments = this.timeline[vpos];
@@ -3325,7 +4854,6 @@
             for (const comment of comments) {
                 if (comment.isHovered(pos)) {
                     const newComment = buildAtButtonComment(comment.comment, vpos);
-                    console.log(newComment);
                     if (!newComment)
                         continue;
                     this.addComments(newComment);